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中,就可以實現上傳多個文件調用一次接口