微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

 

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐