el-upload组件调用后端接口上传文件实践

sssammmm2023-08-24 16:32

要点说明：

使用:http-request覆盖默认的上传行为，可以添加除文件外的其他参数，注意此时仍需保留action属性，action可以传个空串
给http-request属性绑定的函数，函数入参必须为param
调用接口请求，注意 headers:{

'content-type':'multipart/form-data'

}时，请求参数需要通过new FormData()方式传入
获取上传接口返回值：this.uploadFileUrl2 = res.data.data

<el-upload class="upload" drag action="" :http-request="uploadFileHttp1" :data="uploadData" :file-list="fileList" :limit="1" list-type="picture">

图片1（点击上传）

</el-upload>

data() {
return {
复制代码
```
          fileList: [],
          uploadFileUrl1:''
          
      }
  },
```
uploadFileHttp1(param) {
var file = param.file
let params = new FormData()
params.append("upload_type", 'public');
params.append("file", file);
axios({
method:'post',
url:'https://xxxxx/upload_file',
data:params,
headers:{
'content-type':'multipart/form-data'
}
}).then(res => {
console.log(res)
this.uploadFileUrl1 = res.data.data
复制代码
```
          })
          .catch(err => {
              console.log(err)
          })
      },
```