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"
        });
      }
    },