zoukankan      html  css  js  c++  java
  • 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"
            });
          }
        },
    
    
    


  • 相关阅读:
    Tomcat建立多个应用(Web Server),多个主机,多个站点的方法
    Spring 注解bean默认名称规则
    spring+springMVC,声明式事务失效,原因以及解决办法
    Spring事务失效的原因
    MySQL 对于千万级的大表要怎么优化?
    前端开发利器: Bootstrap + AngularJS
    scrapy爬取段子
    scrapy安装
    xpath和CSS选择器
    pycharm远程登录mysql
  • 原文地址:https://www.cnblogs.com/MR-cui/p/12050005.html
Copyright © 2011-2022 走看看