1. 接口需要设置 headers: { 'Content-Type': 'multipart/form-data' }, from-data流的形式传参
2. js
html:
// 文件上传<el-button v-if="isShowErrBtn" type="primary" style="width:170px;margin-top: 15px;" icon="el-icon-download" @click="downloadExcel()">下载导入失败文档</el-button> // 模版下载 <a :download="download" :href="'/jpark-center-mgr'+downLoadAddress" class="downA">下载模板</a> // style .file{ position: relative; margin: 20px auto 0 auto; text-align: center; } .file i{ display: block; font-size:20px; margin-top: 25px } .file span{ color: #fff; cursor: pointer; } .file input { display: block; line-height: 100px; width: 100%; height: 100%; opacity: 0; //透明，不显示 position: absolute; left: 0; top:0; z-index: 9999; cursor: pointer; }
<div class="file"> <el-button type="primary" style="width:170px" icon="el-icon-upload2">重新导入文件</el-button> <input :value="uploadValue" v-if="refush" ref="referenceUpload" class="upload" type="file" v-on:change="importfxx($event)" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" /> </div>
// 失败文件下载
js:
// 文件上传downloadExcel(){ let that = this // var customerId= JSON.parse(this.fileData.customerId); // let param = { customerId } let param = new Object() for( let key in this.fileData ) { if(this.fileData.hasOwnProperty(key)){ param[key] = this.fileData[key] } } this.downWrongExcel(param).then(rep=>{ if (rep.status == 200) { let filterVals = rep.respData.list; if (this.downErrorExcelHandle != null) { let obj = this.downErrorExcelHandle(filterVals) // console.log('父组件执行的值', obj) this.tHeader = obj.tHeader this.tHeaderfilterVal = obj.tHeaderfilterVal this.filterList = obj.filterVals } else { this.tHeader = ['车牌号','车牌颜色','处理结果'] this.tHeaderfilterVal = ['carNo','carnoColor','result'] if (filterVals && filterVals.length > 0) { filterVals.forEach(el => { el.carnoColor = this.formatCarnoColor('', '', el.carnoColor); }); } this.filterList = filterVals } that.downLoadWrongExcel(this.tHeader, this.tHeaderfilterVal, this.filterList) } });
importfxx(event) { console.log("准备上传",this.fileData); this.loading =true this.file = null this.file = event.currentTarget.files[0]; let suffix = this.file.name.split(".")[(this.file.name.split(".").length-1)] console.log("文件信息",suffix) if (suffix != 'xlsx' && suffix != 'xls'){ this.loading =false this.$message({ message: '不支持的文件类型，请下载模板', type: 'warning' }); return false } else { this.isWrong = false; let _this = this; let inputDOM = this.$refs.inputer; // 通过DOM取文件数据 var rABS = false; //是否将文件读取为二进制字符串 var f = this.file; var forData = new FormData() for( let key in this.fileData ) { if(this.fileData.hasOwnProperty(key)){ forData.append(key,this.fileData[key]) } } forData.append("file",f) this.uploadValue = ''; //置空 clearInterval(this.timer); // var customerId= JSON.parse(this.fileData.customerId); let param = new Object() for( let key in this.fileData ) { if(this.fileData.hasOwnProperty(key)){ param[key] = this.fileData[key] } } console.log('param', param) this.request(forData).then(resp =>{ if (resp.respCode == 'success'){ this.totalNum = resp.totalNum; console.log("上传成功"); //记录id //var id=0; this.timer = setInterval(()=>{ // 检测最近有没有上传失败记录 this.downWrongExcel(param).then(rep=>{ if (rep.respData) { if (rep.respData.opStatus==1) { //if(rep.respData.opStatus==1||rep.respData.opStatus==2){ console.log("bbbb"); this.loading =false //id=rep.respData.id; this.step = 2; this.totalNum=rep.respData.totalNum; this.finishedNum=rep.respData.finishedNum; this.percentage=Math.round(rep.respData.finishedNum/rep.respData.totalNum*100) ; console.log("百分比"+this.percentage); console.log("百分比"+this.percentage); console.log("总数"+rep.respData.totalNum); console.log("已完成"+rep.respData.finishedNum); if (rep.respData.totalNum==rep.respData.finishedNum) { console.log("结束"); // clearInterval(this.timer); // this.$message({ // message: '导入成功', // type: 'success' // }) // if (rep.respData.list) {this.$emit('success', rep.respData.list)} // 导入成功回调 this.refush=false this.loading =false // this.dialogVisible = false } } else if(rep.respData.opStatus==2){ console.log("导入成功"); clearInterval(this.timer); // this.$message({ // message: '导入成功', // type: 'success' // }) this.$emit('success',rep.respData.list)// 导入成功回调 this.refush=true this.loading =false this.dialogVisible = false } else if(rep.respData.opStatus==4){ console.log("校验不通过"); this.step = 3; this.loading =false; this.refush = true; this.report = `由于导入内容未按照模板格式进行填写，部分车牌号码导入失败，请下载文档查看导入失败的车牌号码！` clearInterval(this.timer); } } // else{ // console.log("校验不通过"); // clearInterval(interval); // } }); },2000) } else { console.log('文件导入失败') //clearInterval(interval); this.isWrong = true; this.step=3; this.loading =false //this.isReport =true this.refush=false this.report=resp.respMsg if (this.report == `每次导入上限为${this.maxLength}条`) { this.isShowErrBtn = false } else { this.isShowErrBtn = true } this.initBox =false this.$message({ message: resp.respMsg, type: 'warning' }) let that =this setTimeout(function(){ that.refush=true },100) this.$emit('error',{})// 失败回调 } }).catch(function (error) { //clearInterval(interval); _this.refush=false _this.loading =false _this.$message({ message: '文件导入错误', type: 'warning' }) console.log(error,'文件导入错误') }) } },
// 失败文件下载
}, // 模版下载， 模版文件需要放在本地 downLoadAddress: '/static/excel/merchantCarTemplate.xlsx',
标签：传参,Vue,false,log,formdata,let,respData,console,rep From： https://www.cnblogs.com/mmzuo-798/p/17901496.html