首页 > Web开发 > 详细

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

时间:2020-10-17 11:45:08      阅读:562      评论:0      收藏:0      [点我收藏+]

前台代码

          <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表单中的数据

 

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

原文:https://www.cnblogs.com/yl666666/p/13829761.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!