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&®.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