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


  • 相关阅读:
    IOS无线客户端自动化测试
    junit 测试报错 java.lang.Exception: No runnable methods
    mysql varchar(128)可以存多少汉字
    求两个数的百分比
    日期转换
    两个 integer 值判断是否相等
    整洁代码之道——重构
    Eclipse里项目名有红叉,但是底下的每一个文件都没有红叉
    #dubbo# XML文件报错dubbo:XX解决方法
    String处理入门
  • 原文地址:https://www.cnblogs.com/MR-cui/p/12050005.html
Copyright © 2011-2022 走看看