Vue 图片上传formdata()传参形式

发布时间 2023-12-14 16:42:53作者: front-gl

1. 接口需要设置 headers: { 'Content-Type': 'multipart/form-data' },  from-data流的形式传参

 2. js

html:

// 文件上传
<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>
// 失败文件下载
  <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;
   
}
 

js:

// 文件上传
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,'文件导入错误') }) } },


// 失败文件下载
  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)
          }
        });

      },
 
 // 模版下载, 模版文件需要放在本地
 
  downLoadAddress: '/static/excel/merchantCarTemplate.xlsx',