vue elementui 文件導入/文件上傳/文件下載

文件導入

 <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'

  })

}