el-upload实现自定义携带参数上传文件（ :http-request 方式）

1. el-upload组件

使用 :http-request 自定义上传方法，action仍然要有，随便起个名字即可，

注意使用 :http-request 之后， :on-success, :on-error 指令是不会触发的

自定义上传 函数为  uploadFile

                <el-upload
                  :show-file-list="false"
                  class="upload-demo"
                  action="fakeaction"
                  :limit="1"
                  accept=".csv"
                  :http-request="uploadFile">
        <el-button size="small" type="primary" @click="bindId(scope.row.id)">上传计算文件</el-button>
                </el-upload>

2. 封装上传方法（定义传输请求头,传输格式）

// 在api.js中编写上传方法，并导出

export const uploadFileRequest = (url, params) => {
  return axios({
    method: 'post',
    url: `${base}${url}`,
    data: params,
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  });
}

在main.js中将封装好的方法加入全局，后面可直接调用

import {uploadFileRequest} from './utils/api'


​​​​​​​Vue.prototype.uploadFileRequest = uploadFileRequest;

3. 在uploadFile函数中，直接调用uploadFileRequest

uploadFile(params){
        const file = params.file;
        // 使用FormData传参数和文件
        var form = new FormData();
        // 文件
        form.append("file", file);
        // 参数
        form.append("id", this.urlId);
        // 调用封装好的上传方法，传给后台FormData
        this.uploadFileRequest("/forecast/arj/upload",form).then(resp=>{
          if(resp && resp.status == 200){
            this.$message("成功了");
          }
        })
      },

4. 后台获取参数    

正常获取即可，方法内容就不写了。

    @PostMapping("/arj/upload")
    public RespBean upload(@RequestParam MultipartFile file,int id){  
  
    }

点个赞再走，感谢！