vue elementui 文件导入/文件上传/文件下载

Z时代
2024-01-10
分类：综合

vue

文件导入

 <el-upload style="display:inline-block"
                  class="upload-demo" :action="`/admin/upload/excle/purchase/plan/material/upload`"
                  :headers="myHeaders" :on-success="handleAvatarSuccess"
                  v-loading="loading2"
                  :on-error="handleAvatarError" :with-credentials="true"
                  :disabled="isfinish"
                  :on-change="uploadeStatus"
                  :show-file-list="false">
                  <el-button type="success" :disabled="isfinish">导入商品</el-button>
 </el-upload>

action--------接口地址
data

  loading2: false,
      isfinish: false,
      selectedGoodslist: [],
         myHeaders: {
       'userId': localStorage.getItem('userId'),
       'token': localStorage.getItem('token')
      },

method

  uploadeStatus () {
      this.isfinish = !this.isfinish
      this.loading2 = !this.loading2
    },
      handleAvatarSuccess (res, file, fileList) {
      console.log(fileList)
        if (res.code != 200) {
            if (res.data != null) {
                this.$alert(`导入失败，${res.data}`, '系统通知', { confirmButtonText: '确定', type: 'error' })
            } else {
                this.$alert(`导入失败，${res.msg}`, '系统通知', { confirmButtonText: '确定', type: 'error' })
                fileList = []
                return false
            }
        } else {
            this.errorList = res.data.errorList
            this.errorListSize = res.data.errorListSize
            this.successList = res.data.successList
            this.successListSize = res.data.successListSize
            this.loseStr = res.data.errorList.toString()
            this.successStr = res.data.successList.toString()
            this.$alert(`导入成功`, '系统通知', { confirmButtonText: '确定', type: 'success' })
          // let allArr=fileList[0].response.data.successList;
           let allArr=this.successList;
           console.log("allArr")
          console.log(allArr)
          let goodsRedeemCodes = [];
          let goodsRedeemCodesErro = this.goodsRedeemCodesErro;
          let reg=/^[A-Za-z0-9]{4,30}$/;
          allArr.map(item => {
                if(goodsRedeemCodes.indexOf(item)==-1&&reg.test(item)&&this.goodsRedeemCodes.indexOf(item)==-1){
                    goodsRedeemCodes.push(item);
                }else{
                  goodsRedeemCodesErro.push(item)
                }
           });
          this.goodsRedeemCodes=this.goodsRedeemCodes.concat(goodsRedeemCodes);
          this.goodsRedeemCodesErro=goodsRedeemCodesErro;
          this.ruleForm.stock=this.goodsRedeemCodes.length;
        }
      },
      handleAvatarError (res) {
          this.$alert(`导入失败，${res.msg}`, '系统通知', { confirmButtonText: '知道了', type: 'error' })
      },

文件下载

前端实现下载功能

 let obj = {}
        templateDownLoad(obj)
        .then(res => {
          this.loading1 = false;
          const content = res;
          const blob = new Blob([content]);
          const fileName = "模板.xlsx";
          if ("download" in document.createElement("a")) {
            // 非IE下载
            const elink = document.createElement("a");
            elink.download = fileName;
            elink.style.display = "none";
            elink.href = URL.createObjectURL(blob);
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href); // 释放URL 对象
            document.body.removeChild(elink);
          } else {
            // IE10+下载
            navigator.msSaveBlob(blob, fileName);
          }
        })
        .catch(res => {
          this.loading1 = false;
        });