标签：文件 vue elink elementui res goodsRedeemCodes item let data

文件导入

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

export function templateDownLoad(obj) {   return request({     url: `/admin/download/purcahse/template`,     method: 'post',     data: obj,     responseType: 'arraybuffer'   }) }

标签：文件,vue,elink,elementui,res,goodsRedeemCodes,item,let,data
来源： https://www.cnblogs.com/shuihanxiao/p/15410908.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。