vue項目使用element元件上傳excel檔案

html部分

<button @click="impoortExcel">導入excel檔案</button>
    <!-- 導入人員檔案 -->
    <!--  action 放的是導入檔案的背景位址 -->
    <el-dialog title="導入人員檔案" :visible.sync="importDialogVisible" width="66%">
      <el-upload
        ref="upload"
        name="file"
        :limit="limit"
        :auto-upload="false"
        action="接口位址"
        :on-exceed="handleExceed"
        :file-list="filelist"
        :on-change="handleChansge"
      >
        <el-button slot="trigger" size="small" type="primary">選取檔案</el-button>
        <el-button
          style="margin-left: 10px;"
          size="small"
          type="success"
          @click="postfile"
          :disabled="btn.disable"
        >{{btn.message}}</el-button>
        <div slot="tip" class="el-upload__tip">上傳檔案隻能為excel檔案，且為xlsx,xls格式</div>
      </el-upload>
        //此處可以寫導入時出現的詳細錯誤資訊，包含第幾行出現問題顯示出來
      <div v-for="o in errmesg" :key="o.message" class="text item">{{ o.message }}</div>
    </el-dialog>
           

data部分

data() {
  return {  
   importDialogVisible: false,
      //檔案
      file: "",
      filename: "",
      limit: 1,
      filelist: [],
      errmesg: [],
      btn: {
        disable: false,
        message: "上傳伺服器",
      },
   }
}
           

彈窗方法

impoortExcel() {
      let that = this;
      that.importDialogVisible = true;
    },
           

選擇檔案方法

handleExceed(e) {
      // 判斷是否隻能上傳一個檔案，超過提示報錯
      console.log(e);
      this.$notify.error({
        title: "錯誤",
        message: "隻能上傳一個檔案哦",
      });
    },
    handleChansge(file, fileList) {
      console.log(file);
      let name = file.name;
      if (!/\.(xlsx|xls|XLSX|XLS)$/.test(file.name)) {
        this.$notify.error({
          title: "錯誤",
          message: "上傳檔案隻能為excel檔案，且為xlsx,xls格式",
        });
        this.filelist = [];
        this.file = "";
        return false;
      }
      this.file = file.raw;
      this.filename = file.name;
    },
           

上傳檔案方法

postfile() {
      let that = this;
      if (this.file == "") {
        that.$notify.error({
          title: "錯誤",
          message: "上傳檔案不能為空",
        });
        return false;
      } else {
        // 檔案形式的需要用 formData形式
        let formData = new FormData();
        formData.append("file", this.file);
        let url = "接口位址";
        let config = {
          headers: { "Content-Type": "multipart/form-data" },
        };
        this.btn.disable = true;
        this.btn.message = "上傳中，請等待";
        this.$axios1
          .post(url, formData, config)
          .then(function (response) {
            console.log(response);
            that.$notify({
              title: "成功",
              message: response.data.message,
              type: "success",
            });
            that.filelist = [];
            that.btn.disable = false;
            that.btn.message = "上傳伺服器";
          })
          .catch((err) => {
            that.btn.disable = false;
            that.btn.message = "上傳伺服器";
            that.$notify.error({
              title: "錯誤",
              message: "上傳過程出錯啦",
            });
          });
      }
    },
           

效果展示

頁面展示

上傳成功之後 根據背景傳回資料自行處理