elementui上传组件upload一次提交多个文件到后台（前后台代码）

前台代码

          <el-upload
            class="upload-demo"
            style="margin-left: 24px;"
            ref="upload"
            action="''"
            accept='.jpg,.png'
            multiple
            :limit="2"
            :on-change="handleUploadFileChange"
            :on-remove="removeFile"
            :file-list="accessory"
            :auto-upload="false"
          >
            <el-button slot="trigger" :disabled="params.operation=='view'" size="small" type="primary">选取文件</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过5MB</div>
          </el-upload>

    　　　　     handleUploadFileChange(file) {       this.formData.accessory.push(file);     },

提交时代码

// 封装成 FormData ，用上传文件请求进行保存
          let formData = new FormData();
          const params = this.startTaskFormObj.formDataif(params.accessory && params.accessory.length>0) {for(let f of params.accessory) {
              formData.append("file", f.raw);//需要使用append将文件添加到数据中
            }
          }
　　　　　　//以下是 form表单的其他数据
          for (const key in params) {
            if (key === "accessory") {
              continue;
            }
            if (params[key] !== undefined) {
              formData.append(key, params[key]);
            }
          }
//然后post发送数据到后台

后台代码

@PostMapping(value = "xxx")
public AjaxResult start(@RequestParam("file") MultipartFile[] file, @RequestParam Map<String, Object> variables) {}
// file为前台上传的文件
// variables 为form表单中的数据

 

标签：file,elementui,formData,upload,accessory,params,key,上传
来源： https://www.cnblogs.com/yl666666/p/13829761.html