vu-antd 上传文件自定义参数填坑

775 阅读1分钟

需求:上传文件但是需要传入文件以及多个参数。

参数:

{ 
  path: '/fund'// 类型
  file: FormData // 具体的上传文件
}

失败方案:

用了修改axios的headers的Content-Type办法,这种办法后端会报错如下

Failed to parse multipart servlet request; nested exception is java.io.IOException: org.apache.tomcat.util.http.fileupload.FileUploadException: the request was rejected because no multipart boundary was found

查了一下发现后端在接收文件流的时候类型报错。所以还是没有转化成功。

成功案例

代码如下,采用antd本身的上传的时候自带一个传入参数的属性data,通过这个设置path就可以了,会动将文件还有参数进行拼接。发送请求成功。

<a-upload
  :action="$api.uploadS3"
  :headers="headers"
  :data="fileData"
>
  <slot>
      <a-button> <a-icon type="upload" /> Click to Upload </a-button>
  </slot>
</a-upload>

注: 我这里用的fileData是Object参数类型。

有不明白的可以问。