vue element upload

       
<el-upload v-if="!isDisplayWatch" class="upload-button" action='' :http-request="uploadFile" accept=".xlsx, .xls" :on-success="storeImportSuccess" :before-upload="beforeAvatarUpload" :show-file-list="false" > <el-button size="mini" type="primary">导入</el-button> </el-upload> //导入前操作 beforeAvatarUpload() { this.fullscreenLoading = this.$loading({ lock: true, text: "导入中", spinner: "el-icon-loading", background: "rgba(128, 128, 128, 0.7)" }); }, uploadFile(item) { let formData = new FormData(); formData.append("file", item.file); this.displayUpload({ formData, id: this.$route.params.id }) .then(res => { this.fullscreenLoading.close(); if (res.code === 0) { this.$message({ message: "导入成功", type: "success" }); this.updateExhibit(); } else { this.$message({ message: res.msg, type: "error" }); } }) .catch(() => { this.fullscreenLoading.close(); }); },


默认上传
        <el-upload
          v-if="!isDisplayWatch"
          class="upload-button"
          :action='action'
          :headers="headers"
          accept=".xlsx, .xls"
          :on-success="storeImportSuccess"
          :before-upload="beforeAvatarUpload"
          :show-file-list="false"
        >
          <el-button size="mini" type="primary">导入</el-button>
        </el-upload>


  computed: {
    ...mapGetters(["isDisplayWatch"]),
    headers() {
      const token = localStorage.getItem("token");
      return {
        token: token
      };
    },
    action() {
      return `${this.$appAPI}/display/good/import/${this.$route.params.id}`;
    }
  },


  //导入前操作
    beforeAvatarUpload() {
      this.fullscreenLoading = this.$loading({
        lock: true,
        text: "导入中",
        spinner: "el-icon-loading",
        background: "rgba(128, 128, 128, 0.7)"
      });
    },
    storeImportSuccess(res) {
      this.fullscreenLoading.close();
      if (res.code === 0) {
        this.$message({
          message: "导入成功",
          type: "success"
        });
        this.updateExhibit();
      } else {
        this.$message({
          message: res.msg,
          type: "error"
        });
      }
    },
 
  
 


猜你喜欢

转载自www.cnblogs.com/MR-cui/p/12050005.html