快捷導(dǎo)航

vue之el-upload使用FormData多文件同時(shí)上傳問題

更新時(shí)間：2023年05月22日 15:00:30 作者：maidu_xbd

這篇文章主要介紹了vue之el-upload使用FormData多文件同時(shí)上傳問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

需求描述

使用el-upload 手動(dòng)上傳方式進(jìn)行文件上傳【https://element.eleme.cn/#/zh-CN/component/upload】，當(dāng)選擇上傳多個(gè)文件時(shí)，選擇幾個(gè)文件就會(huì)向后臺(tái)發(fā)送幾次請(qǐng)求。

先后臺(tái)要求同時(shí)一次請(qǐng)求發(fā)送多個(gè)文件，包括文件（如圖中的file）和其他參數(shù)（如圖中的graphName和userID）

解決方法

通過FormData對(duì)象存放上傳的文件和參數(shù)，將fileList中的文件存放在FormData中。具體見（3）多文件通過FormData存放上傳

（1）補(bǔ)充知識(shí)點(diǎn)：FormData

FormData 數(shù)據(jù)形式為鍵值對(duì)，數(shù)據(jù)可通過XMLHttpRequest.send（）方式發(fā)送出去

FormData.append（key,value）：向FormData對(duì)象中添加一個(gè)鍵值對(duì)，如執(zhí)行FormData.append（key1,value1）后FormData.append（key1,value2），key1對(duì)應(yīng)值value1不會(huì)被覆蓋，而是新增對(duì)應(yīng)值value2
FormData.get(key)：返回FormData對(duì)象中給定key對(duì)應(yīng)的第一個(gè)值
FormData.getAll(key)：返回FormData對(duì)象中給定key對(duì)應(yīng)的所有值

FormData 具體使用見https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects

（2）單文件手動(dòng)上傳

:auto-upload="false"----關(guān)閉自動(dòng)上傳
:limit="1"----限制上傳文件數(shù)量為1個(gè)
:data="uploadData"----上傳文件時(shí)的附帶參數(shù)如userID
:action="batchImportUrl"----請(qǐng)求接口路徑

具體見代碼：

<el-dialog
      :visible.sync="batchImportDialogVisible"
      class="uploadFormDialog"
      width="40%"
      @close="closebatchImportForm"
    >
      <div slot="title">
        <span>{{ dialogTitle }}</span>
      </div>
      <el-upload
        class="upload-demo"
        ref="batchImport"
        :auto-upload="false"
        :on-error="batchImportError"
        :on-remove="batchRemoveFile"
        :before-upload="beforebatchImport"
        :on-progress="batchImportProgress"
        :on-success="batchImportSuccess"
        :on-change="batchImportChange"
        :file-list="fileList"
        :limit="1"
        :data="uploadData"
        :action="batchImportUrl"
      >
        <el-button
          slot="trigger"
          size="small"
          type="warning"
          @click="selectFile"
          >選取文件</el-button
        >
        <el-button size="small" type="success" @click="submitBatchImport">
          <span v-show="!isUploadFlag">上傳到服務(wù)器</span>
          <span v-show="isUploadFlag">
            正在上傳中
            <i class="el-icon-loading"></i>
          </span>
        </el-button>
        <div slot="tip" class="el-upload__tip">
          上傳文件格式為json或rdf,點(diǎn)擊
          <a class="download" @click="downloadTemplate">下載模板</a
          >&nbsp;&nbsp;可查看模板。
        </div>
      </el-upload>
    </el-dialog>

  // 批量導(dǎo)入新的圖譜信息
    batchAddGraph() {
      this.dialogTitle = "批量創(chuàng)建新圖譜";
      this.batchImportDialogVisible = true;
      this.batchImportUrl = " /api/manage/common/graph/add/batch";
    },
    // 批量導(dǎo)入已存在的圖譜信息
    batchUpdateGraph(name) {
      this.dialogTitle = `批量導(dǎo)入${name}圖譜`;
      this.uploadData = {
        userID: "",
        graphName: this.graphName
      };
      this.batchImportDialogVisible = true;
      this.batchImportUrl = " /api/manage/common/graph/update/increment";
    },
    // 提交批量導(dǎo)入
    submitBatchImport() {
      if (this.$refs.batchImport.uploadFiles.length == 0) {
        this.$message.warning("請(qǐng)選擇要上傳的文件");
        return;
      }
      this.loading = this.$loading({
        lock: true,
        text: "正在導(dǎo)入圖譜,請(qǐng)稍等",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.6)"
      });
      this.isUploadFlag = true;
      this.$refs.batchImport.submit();
    },
    // 選擇文件
    selectFile() {
      this.$refs.batchImport.clearFiles();
    },
    // 關(guān)閉對(duì)話框-清除照片
    closebatchImportForm() {
      this.isUploadFlag = false;
      this.$refs.batchImport.clearFiles();
    },
    // 批量上傳成功的鉤子
    batchImportSuccess(res, file, fileList) {
      if (res.respCode === "200") {
        this.$message.success("批量導(dǎo)入成功");
        this.graphDialogVisible = false;
        this.isUploadFlag = false;
        this.getGraphInfo();
      } else {
        this.$message.error(res.respDesc);
      }
      this.batchImportDialogVisible = false;
      this.loading.close();
    },
    // 批量導(dǎo)入失敗時(shí)的鉤子
    batchImportError() {
      this.$message.error(" 批量導(dǎo)入失敗");
      this.isUploadFlag = false;
      this.loading.close();
    },
    // 批量導(dǎo)入-文件狀態(tài)改變時(shí)的鉤子
    batchImportChange(file, fileList) {
      // console.log("文件狀態(tài)改變時(shí)的鉤子");
      if (!/.(json|rdf)$/.test(file.name)) {
        this.$refs.batchImport.uploadFiles = [];
        this.$message.warning("請(qǐng)選擇json或rdf格式的文件");
      }
    },
    // 上傳文件前的鉤子
    beforebatchImport(file) {
      // console.log("上傳文件前的鉤子");
    },
    // 文件上傳時(shí)的鉤子
    batchImportProgress(event, file, fileList) {
      // console.log("==文件上傳時(shí)progress==", file);
    },
    //文件列表移除文件時(shí)的鉤子
    batchRemoveFile() {
      // console.log("移除");
    }

（3）多文件通過FormData存放上傳

:file-list="fileList" 配置一個(gè)數(shù)組用于接收上傳的文件列表

multiple 選擇文件時(shí)允許多選

具體代碼：

<el-dialog
      :visible.sync="batchImportDialogVisible"
      class="uploadFormDialog"
      width="40%"
      @close="closebatchImportForm"
      :close-on-click-modal="false"
    >
      <div slot="title">
        <span>{{ dialogTitle }}</span>
      </div>
      <div v-if="dialogTitle == '批量創(chuàng)建新圖譜'" class="input-wrapper">
        <div class="name">圖譜名稱</div>
        <el-input v-model="bacthImportGraphName" clearable></el-input>
      </div>
      <el-upload
        class="upload-demo"
        ref="batchImport"
        :auto-upload="false"
        accept=".json,.csv,.rdf"
        :on-remove="batchRemoveFile"
        :on-change="batchImportChange"
        :on-exceed="batchImportExceed"
        :file-list="fileList"
        :limit="2"
        :action="batchImportUrl"
        multiple
      >
        <el-button
          slot="trigger"
          size="small"
          type="warning"
          @click="selectFile"
          >選取文件</el-button
        >
        <el-button size="small" type="success" @click="submitBatchImport">
          <span v-show="!isUploadFlag">上傳到服務(wù)器</span>
          <span v-show="isUploadFlag">
            正在上傳中
            <i class="el-icon-loading"></i>
          </span>
        </el-button>
        <div slot="tip" class="el-upload__tip">
          上傳文件格式為json、rdf或csv,點(diǎn)擊
          <a class="download" @click="downloadTemplate">下載模板</a
          >&nbsp;&nbsp;可查看模板。
        </div>
      </el-upload>
    </el-dialog>

// 選擇文件
    selectFile() {
      // this.$refs.batchImport.clearFiles();
    },
    // 批量導(dǎo)入新的圖譜信息
    batchAddGraph() {
      this.dialogTitle = "批量創(chuàng)建新圖譜";
      this.batchImportDialogVisible = true;
      this.uploadData.graphName = this.bacthImportGraphName; //綁定數(shù)據(jù)
      this.batchImportUrl = " /api/manage/common/graph/add/batch";
    },
    // 批量導(dǎo)入已存在的圖譜信息
    batchUpdateGraph(name) {
      this.dialogTitle = `批量導(dǎo)入${name}圖譜`;
      this.uploadData = {
        userID: "",
        graphName: this.graphName
      };
      this.batchImportDialogVisible = true;
      this.batchImportUrl = " /api/manage/common/graph/update/increment";
    },
    // 批量導(dǎo)入-文件狀態(tài)改變時(shí)的鉤子
    batchImportChange(file, fileList) {
      // console.log("文件狀態(tài)改變時(shí)的鉤子");
      this.fileList = fileList;
    },
    //文件列表移除文件時(shí)的鉤子
    batchRemoveFile(file, fileList) {
      // console.log("文件列表移除文件時(shí)的鉤子");
      this.fileList = fileList;
    },
    // 提交批量導(dǎo)入
    submitBatchImport() {
      if (this.dialogTitle == "批量創(chuàng)建新圖譜") {
        this.uploadData.graphName = this.bacthImportGraphName;
        // 1.提交批量創(chuàng)建新圖譜
        if (!this.bacthImportGraphName) {
          this.$message.warning("請(qǐng)?zhí)顚憟D譜名稱");
          return;
        }
      }
      if (this.$refs.batchImport.uploadFiles.length == 0) {
        this.$message.warning("請(qǐng)選擇要上傳的文件");
        return;
      }
      this.loading = this.$loading({
        lock: true,
        text: "正在導(dǎo)入圖譜,請(qǐng)稍等",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.6)"
      });
      this.isUploadFlag = true;
      // this.$refs.batchImport.submit();
      let formData = new FormData(); //  用FormData存放上傳文件
      this.fileList.forEach(file => {
        formData.append("file", file.raw); //文件
      });
      formData.append("graphName", this.uploadData.graphName);
      formData.append("userID", "13013");
      axios
        .post(this.batchImportUrl, formData, {
          headers: { "Content-Type": "multipart/form-data" } //設(shè)置請(qǐng)求頭請(qǐng)求格式為JSON
        })
        .then(res => {
          this.$message.success(res.data.respDesc);
          this.graphDialogVisible = false;
          this.isUploadFlag = false;
          this.bacthImportGraphName = "";
          this.getGraphInfo();
          this.loading.close();
          this.batchImportDialogVisible = false;
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 關(guān)閉對(duì)話框-清除照片
    closebatchImportForm() {
      this.isUploadFlag = false;
      this.$refs.batchImport.clearFiles();
    },
    // 批量導(dǎo)入-定義超出限制時(shí)的行為
    batchImportExceed(files, fileList) {
      this.$message.warning(
        `當(dāng)前限制選擇 2 個(gè)文件，本次選擇了 ${
          files.length
        } 個(gè)文件，共選擇了 ${files.length + fileList.length} 個(gè)文件`
      );
    },