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

 要点说明：

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

  headers:{

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

  }时，请求参数需要通过new FormData()方式传入

• 获取上传接口返回值：this.uploadFileUrl2 = res.data.data

<el-uploadclass="upload"dragaction="":http-request="uploadFileHttp1":data="uploadData":file-list="fileList":limit="1"list-type="picture"><i class="el-icon-upload"></i><div class="el-upload__text">图片1<em>（点击上传）</em></div></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)})},