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


  • 相关阅读:
    MySql 踩坑小记
    Redux 实现过程的推演
    正则表达式的一些探索(偏JavaScript)
    [python工具] 如何使用plotly制作散列图
    使用epoll实现一个udp server && client
    python 实现一个简单tcp epoll socket
    [原创]差分放大器阻抗匹配计算+阻抗计算小工具
    将博客搬至CSDN
    [转]谈NAND Flash的底层结构和解析
    [原创]Fashion汽车定位器拆解
  • 原文地址:https://www.cnblogs.com/MR-cui/p/12050005.html
Copyright © 2011-2022 走看看