多个el-upload组件上传文件，同时提交文本字段

古城微笑少年丶 2023-02-17 05:12 61阅读 0赞

最近碰到个需求如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lfd194X2s_size_16_color_FFFFFF_t_70][]

表单里既有普通文本字段，又有上传文件，且是多个不同字段（不是一个字段多个文件）;

当时后端只给了一个接口:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lfd194X2s_size_16_color_FFFFFF_t_70 1][]

思路是先var formdata=new formdata(),再formdata.append('xx',xxx);再axios.post('url',formdata);

实际写的时候碰到了一些问题，很多axios都会在使用前进行封装一下，加上拦截器,我用vue-element-admin作为后台模板,里面的axios也设置了拦截器，拦截器里面会对传输的参数进行过滤,例如这些代码:

if(config.data && !config.data.param){
        config.data = qs.stringify(config.data);
    }

这就导致，发送请求的时候请求头里面content-type都不是multiple/form-data 而是application/x-www-form-urlencoded；

后端根本接收不到数据，我又试了下在axios里面加上headers: \{'Content-Type': 'multipart/form-data'\}仍然没有传值到后台；

后来百度了之后，查到资料说需要建一个纯净的axios，再通过这个纯净的axios发送请求，于是就成功了，核心代码如下:

import myaxios from "axios"
    
    export function updateWx(param) {
      return myaxios.post(url_base+'/wechatConfig/update',param).then((res)=>{
        return res
      })
    }

<el-form-item label="微信公钥证书文件" prop="publicKeyFile">
              <el-upload
                class="upload-demo"
                ref="upload"
                accept=".pem"
                :multiple="false"
                :limit="1"
                :action="this.url"
                name="publicKeyFile"
                :file-list="fileList"
                :before-upload="beforeupload"
                :data="this.temp"
                :auto-upload="false">
                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                <div slot="tip" class="el-upload__tip">只能上传pem格式文件</div>
              </el-upload>
            </el-form-item>
           <el-form-item label="微信私钥证书文件" prop="privateKeyFile">
              <el-upload
                class="upload-demo"
                ref="upload2"
                accept=".pem"
                :multiple="false"
                :limit="1"
                :action="this.url"
                name="privateKeyFile"
                :file-list="fileList"
                :before-upload="beforeupload1"
                :data="this.temp"
                :auto-upload="false">
                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                <div slot="tip" class="el-upload__tip">只能上传pem格式文件</div>
              </el-upload>
            </el-form-item>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">
              {
       { $t('table.cancel') }}
            </el-button>
            <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
              {
       { $t('table.confirm') }}
            </el-button>
          </div>

data() {
        return {
          uploadForm: new FormData(),
          fileList :[],
          list: [],
        }
    }

beforeupload(file){
          this.uploadForm.append("publicKeyFile",file)
        },
        beforeupload1(file){
          this.uploadForm.append("privateKeyFile",file)
        },
    
    updateData() {
          this.$refs['dataForm'].validate((valid) => {
            if (valid) {
    
              this.uploadForm.append('businessAccount', this.temp.businessAccount)
              this.uploadForm.append('token', this.temp.token)
              this.uploadForm.append('payKey', this.temp.payKey)
              this.uploadForm.append('mchId', this.temp.mchId)
    
              var len=this.$refs['upload'].$children[0].fileList.length
              var len2=this.$refs['upload2'].$children[0].fileList.length
              if(len){
                this.$refs.upload.submit()  // 提交时触发了before-upload函数
              }
    
              if(len2){
                this.$refs.upload2.submit()
              }
    
              updateWx(this.uploadForm).then(() => {
                this.dialogFormVisible = false
                this.$notify({
                  title: '成功',
                  message: '更新成功',
                  type: 'success',
                  duration: 2000
                })
    
                //重新加载
                this.$router.replace({
                  path: "/redirect" + '/pay/wxpay',
                }).then(() => {
                  setTimeout(() => {
                    this.pulse = false;
                  }, 1000);
                }).catch(() => {});
              })
            }
          })
        },

后记:文件上传，后端应该是会封装一个文件上传的基础方法，然后需要上传文件的时候在一个方法里面调用这个基础方法就好了，这样就可以给出一个专门上传文件的接口，前端请求这个接口后，得到后端返回的文件存储地址，表单提交的时候把这个地址字符串传给后台，这样做前端可以写的优雅，后台也可以提高内聚

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lfd194X2s_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200612155747960.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lfd194X2s=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lfd194X2s_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200612160136915.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lfd194X2s=,size_16,color_FFFFFF,t_70