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, fileList) {
      this.formData.accessory = fileList;
    },
    removeFile(file, fileList){
      this.formData.accessory = fileList;
    }

提交時代碼

// 封裝成 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表單中的數據

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM