element-ui 表单数据提交之多图片上传

element-ui 表单数据提交之多图片上传

需求

目前有这样一个表单，其中包含基础​​input​​数据，及选择多图片同表单一起提交后台

• • 
    
• 选中后：
• • 本地预览选中图片
• 上传时：
• • 多图片上传
  • 
    

上传表单效果如下：

图片选择表单

<el-form-item label="附件" :label-width="formLabelWidth">
            <el-upload
              class="upload-demo"
              ref="upload"
              action="/"
              :on-change="changeFile"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              multiple
              :limit="5"
              :on-exceed="handleExceed"
              :file-list="fileList"
              :http-request="handleHttpRequest"
              :auto-upload="false"
              list-type="picture-card"
            >
              <el-button slot="trigger" size="small" type="primary"
                >上传附件</el-button
              >
              <div
                slot="tip"
                class="el-upload__tip"
                style="float: right;color: #E6A23C"
              >
                只能上传jpg/png/gif文件，且不超过10Mb
              </div>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible" append-to-body>
              <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
          </el-form-item>

文件状态改变处理方法​​changeFile​​

​​on-change:​​​ 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用 ​​function(file, fileList)​​

changeFile(file, fileList) {
          let fileName = file.name;
          let regex = /(.jpg|.jpeg|.gif|.png|.bmp)$/;
          if (regex.test(fileName.toLowerCase())) {
            this.fileList = fileList;
          } else {
            this.$message.error("请选择图片文件");
          }
          console.log(`fileList:${this.fileList}`);
    }

获取已选择文件数组​​fileList​​

自定义上传​​handleHttpRequest​​

​​http-request:​​ 覆盖默认的上传行为，可以自定义上传的实现

handleHttpRequest() {
      // 通过 FormData 对象上传文件
      const formData = new FormData();
      let obj = { ...this.form };
      Object.keys(obj).forEach(key => {
        // console.log(key, obj[key]);
        formData.append(key, obj[key]);
      });

      //循环已选择文件列表 fileList，将文件取出放入 formData 的file数组中
      for (let i = 0; i < this.fileList.length; i++) {
        formData.append("file",this.fileList[i].raw);
      } 
      console.log(`数据：${formData.get("file")}`);
      this.$store
        .dispatch("card/addCmPersonalCertAndAttach", formData)
        .then(() => {
          // 成功上传后清除表单填写数据
          this.form = {};
          this.fileList = [];
          this.kind = null;
          this.users = null;
          this.$message.success("添加成功");
          this.query();
        });
    },

警告：下列方式不能将多图片数据正确发送到后台，示例如：

handleHttpRequest() {
      // 通过 FormData 对象上传文件
      const formData = new FormData();
      let obj = { ...this.form };
      Object.keys(obj).forEach(key => {
        // console.log(key, obj[key]);
        formData.append(key, obj[key]);
      });

      //错误写法：直接将文件fileList数组加入formData中
      formData.append("file",this.fileList);

      console.log(`数据：${formData.get("file")}`);
      this.$store
        .dispatch("card/addCmPersonalCertAndAttach", formData)
        .then(() => {
          this.form = {};
          this.fileList = [];
          this.kind = null;
          this.users = null;
          this.$message.success("添加成功");
          this.query();
        });
    },

发送的请求错误：

后台无法识别造成错误

发送请求

正常发送请求数据，以二进制文件流

后台接收

public CommonResult<String> add(
      HttpServletResponse response,
      HttpServletRequest request,
      @ApiParam(name="file",value="附件", required = true)@RequestParam(value = "file", required = false) MultipartFile[] file)
      throws Exception{
    String msg = "数据插入成功";
    for (int i = 0; i < file.length ; i++) {
      System.out.println(file[i].getOriginalFilename());// 循环输出获取到的文件名
    }
    return new CommonResult<String>(true,msg);
  }

断点调试，正常获取到图片文件数组数据

哈哈，折腾了一会发现才发现这个问题，终于解决了。