elementUI一次请求上传多个文件

elementui

<el-upload

                      class="upload-demo"

                      action="/api-cdc/upload/attachment"

                      ref="upload"

                      :http-request="httpRequest"

                      :on-preview="handlePreview"

                      :on-remove="handleRemove"

                      :on-change="onChange"

                      :before-remove="beforeRemove"

                      multiple

                      :on-exceed="handleExceed"

                      :file-list="fileList"

                      :auto-upload="false"

                    >

                      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>

                      <el-button

                        style="margin-left: 10px;"

                        size="small"

                        type="success"

                        @click="submitUpload"

                      >上传到服务器</el-button>

                      <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->

                    </el-upload>

js

//文件上传
    httpRequest(file) {
      console.log(file);
    },
    submitUpload(file) {
      this.$refs.upload.submit();
      let param = new FormData();
      this.fileList.forEach(file => {
        param.append("files", file.raw); //此处一定是append file.raw 上传文件只需维护fileList file.raw.name要加上
        param.append("fileNames", file.name);
      });
　　//后台接口
      addfile(param)
        .then(res => {
          if (res.code == 200) {
            this.experfrom.healthOffice.attachments = res.data;
            console.log(this.experfrom.healthOffice.attachments);
            this.$message({
              message: "上传成功！",
              type: "success"
            });
          } else {
            this.$message.error(res.message);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    onChange(file, fileList) {
      this.fileList = fileList;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 5 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },

 

使用http-request覆盖默认的上传行为，可以自定义上传的实现 但是上传接口不要设置在里面 ，如果设置在里面会导致多个文件分开传到后台。 将上传接口放在submitUpload中,就可以实现上传多个文件调用一次接口