el-upload自定义参数后上传

el-upload默认自动上传，当我想对参数进行操作的时候就需要通过:http-request覆盖默认的上传行为，可以自定义上传的实现。

明确目标

因为业务的需求，在上传文件的时候我还要传递文件名，和对应调度的子项目id，所以默认的上传方式就不适合我了。

改进方法

话不多说，直接贴代码，再逐一解释

1. action=""一定要设置，action是必填参数，但是我们设置了:http-request，会覆盖action

 <el-upload
    action=""
    :http-request="httpRequest"
    :file-list="fileList"
  >
   <el-button type="text">点击上传el-button>
 el-upload>
 <script>
 import {
       uploadFile } from '@/api/mission'
async httpRequest(param) {
      
     const {
       file } = param
     const formData = new FormData()
     formData.append('file_content', file)
     formData.append('s_pj_code', this.data.s_pj_code)
     formData.append('file_name', file.name)
     await uploadFile(formData)
   }
 script>

发送请求用的axios

export function uploadFile(data) {
     
  return request({
     
    url: `api/file_upload`,
    method: 'post',
    data
  })
}