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


  • 相关阅读:
    地址标记,SpringMVC转发与调用相关知识存档
    SpringMVC+MyBatis项目分析与开发实例
    程序开发思路
    web.xml相关知识摘录整理
    Spring AOP
    Spring+Struts2/Hibernate 学习笔记
    Spring学习笔记 Part.01
    用java实现简单TCP服务器监听
    c语言希尔排序,并输出结果(不含插入排序)
    用java实现AVL树并打印结果
  • 原文地址:https://www.cnblogs.com/MR-cui/p/12050005.html
Copyright © 2011-2022 走看看