vue el-upload action的跨域问题

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

问题：直接在aciton属性中写接口地址，本地上传没问题，上线会出现跨域问题
解决：用http-request指定具体上传方法

---

一、代码

<el-upload
    action="#"
    :http-request="uploadExcel"
    :data="uploadParam"
    accept="xlsx" :show-file-list="false"
    :on-success="
      (res) => {
        return handleExcelImportSuccess(res)
    }"
    style="display: inline-block">
  <el-button type="primary" style="width: 100px; height: 40px;">导入数据</el-button>
</el-upload>

uploadExcel(param) {
	  const formData = new FormData()
	  formData.append('file', param.file)
	  formData.append('table', this.uploadParam.table)
	  this.$axios.post('/busicommon/uploadExcel.do',formData).then(res => {
	    if(res.data.success) {
	      this.$message.success("导入数据成功")
	      this.loadData()
	    } else {
	      this.$message.error("excel表格格式有误,导入数据失败,请注意excel格式要与模板保持一致")
	    }
	  })
	}

二、使用总结

1.http-request：覆盖默认的上传行为，可以自定义上传的实现
2.不需要给action关联上传的地址，但是action这个属性必须写
3.在http-request自定义上传事件中将上传文件保存到一个数组中
4. 接口使用formData表单数据格式传参， 将上传的文件和其他参数一起传给接口，使用的方法是new FormData()
4.如果是单文件上传并携带参数，可以直接在http-request自定义事件中调用后端接口

使用formData传参很方便，要熟练使用