ElementUI实现el-upload多个文件上传一个接口并带入参

本文介绍在Vue中如何实现一个接口上传多个附件，并附带说明参数的详细过程。通过代码示例，展示了如何使用el-upload组件进行文件选择、预览、移除等操作，同时在提交时将文件列表和说明一并发送。

在这里插入图片描述

如图片，在点击提交申请时一个接口上传多个附件并附带说明参数。

<el-upload class="upload"
                       ref="upload"
                       :data="submitData"
                       action="/dsp/mdm/modelapply/upload"
                       :on-preview="handlePreview"
                       :on-remove="handleRemove"
                       :before-remove="beforeRemove"
                       multiple
                       :on-success="handleAvatarSuccess"
                       name="file"
                       :on-change="fileStatusChange"
                       :auto-upload="false"
                       accept=".doc,.docx,.zip,.pdf,.xls,.xlsx"
                       :limit="3"
                       :on-exceed="handleExceed"
                       :file-list="fileList">

<el-form-item label="申请说明"
                      prop="applydesc">
          <el-input type="textarea"
                    clearable
                    maxlength="200"
                    v-model="submitApplyForm.applydesc"></el-input>
        </el-form-item>

为上传的代码块，设置：data为说明值。
首先在vue的数据定义做 this.uploadForm = new FormData(); 用来存放表单数据，点击提交时，将fileList中的值循环添加到uploadForm 中
在这里插入图片描述

let that = this;
 for (var i = 0; i < this.fileList.length; i++) {
      that.uploadForm.append('file', that.fileList[i].raw);
 }
this.uploadForm.append('applydesc', this.submitApplyForm.applydesc);
request.uploadFile('/dsp/mdm/modelapply/upload', this.uploadForm);