vue 文件导入导出/上传下载并与后端交互操作

上传/导入

1、前端解析文件处理后再传递

依赖—解析文件

import Papa from 'papaparse'

html

<div class="_importIn"><img title="导入文件" src="../../assets/image/tech/importIn.png" alt=""><!--css中将导入文件隐藏在导入图片上,即通过绝对定位使input与img重合，且input在上opacity为0--><input title="导入文件" type="file" @change="upFile" ref="importIn" accept=".csv">
</div>

js

//导入文件,csv文件类型为例
upFile(){let dom = this.$refs.importIn;let file = dom.files[0];let name = file.name.split('.');//console.log(dom)let type = name[name.length-1];if(type!='csv'&&type!='CSV'){	//或者直接ile.type === '.../...';this.$message({type:'warning',message:`请导入csv文件`})return;}let _this =this;let data=[]if(file){// csvPapa.parse(file,{	//解析complete:results => {let arr  = JSON.parse(JSON.stringify(results.data))//console.log(arr)let index=0;arr.splice(0,1)    //删掉列名arr.forEach((x,ind) => {if(x.length>=4){let obj = {unit_name:x[0],unit_area:x[1],unit_industry:x[2],unit_url:x[3].split(','),} else if(x.length>1&&x.length<4){	//可会会解析出空行，数据为['']console.log(x)index++;}})if(index>0){this.$message({type:'warning',message:`请检查导入格式是否符合导出格式`})return;}_this.addPoint(data)	//传输数据}})dom.value = null //清空input内容。若不清空同一个文件再次上传不会触发input change事件}
},

2、element-ui + 直接传文件到后台

采用的是element-ui 组件，如果对绑定的属性存在疑问可以去官网查询

html

<el-upload class="upload-demo" :http-request="uploadImg" action="":on-preview="handlePreview":on-remove="handleRemove":on-change="handleChangeVideo":before-upload="beforeAvatarUploadVideo"multiple :limit="1":file-list="addform.video"><!-- v-model="addform.video" --><span style="color: #4A90E2;font-size: 13px;margin-left: 8px;">{{attachmentName}}(.mp4)</span><!-- <div slot="tip" class="el-upload__tip"></div> -->
</el-upload>

js

handlePreview(){},
uploadImg(){},
handleRemove(){this.fileList = [];
},
handleChangeVideo(file, fileList){},//在传文件之前，返回false该文件不会加入上传列表，可以把判断类型加在这个地方
beforeAvatarUploadVideo(file){console.log(file)let arr = file.name.split('.');let type = arr[arr.length-1].toLowerCase();console.log(type)const isMP4 = type==='mp4';//file.type === 'video/mp4';if (!isMP4) {this.$message.error('上传视频只能是 mp4 格式!');this.addform.video = [];}return isMP4;
},

在数据传输到后台的时候，我们需要把文件信息传过去，需要的是file对象，但是file对象必须经过一定的处理后台才能拿到，直接传后台是不能处理的

文件对象

在这里插入图片描述

处理

首先"Content-Type": “‘multipart/form-data’”
然后传输的数据格式需要改为form data

let formData = new FormData(); //文件和普通对象都可以放在里面，通过post将formData 整个传过去，传递数组/对象需要按层级append或者转为string让后端处理
formData.append('screen', this.addform.screen[0]);	
formData.append('report', this.addform.report[0]);

一般传输较大文件需要时间较长
所以可以做一一下提示

this.isOk = true; //提交到后台的按钮是否可点击，true标识diasbled=true,不可点击
//....
//点击提交后按钮不可点击
var msg = this.$message({message: '文件传输中，请等待...',type: 'warning',duration: 0,
});
//提交成功或失败后
this.isOk = false;
msg.close();

下载/导出

通过地址下载

后端需要返回相应http地址才能下载
具体的功能实现为:download=“item.video”

HTML

<a v-if="item.video.indexOf('http')!=-1" class="_download" :href="`${item.video}`"  target="_blank" :title="item.video?item.video:''" :download="item.video" ><i class="el-icon-document"></i><span style="color: #000">{{item.video.split('/')[4]}}</span>
</a>

或者直接

var a = document.createElement('a');
let fileName = ''	//文件名
a.	setAttribute('download', fileName);// download属性,值为下载保存的文件名称
// 根据后台的地址下载
a.setAttribute('href', `${this.$ip}${res.uri}`);
a.click();// 自执行点击事件

前端导出

exportCSV(){ //导出CSV//生成文件let arr = ['名称,区域,行业,地址'];	//第一行，列名。csv文件会默认根据逗号分割成列let data = this.list;	//需要导出的列表for(let i=0;i<data.length;i++){let temp = [];temp.push(data[i].name)	//每一列temp.push(data[i].area)temp.push(data[i].industry)temp.push("\""+data[i].url.join(',')+"\"")	//数组的处理，不处理一个数组会分散到多个列arr.push(temp.join(','));	//添加每一行的内容}console.log(arr)let content = "data:text/csv;charset=utf-8,\ufeff" + arr.join('\n');	//文件格式+文件内容，\n换行//下载文件var link = document.createElement("a");link.setAttribute("href", content);link.setAttribute("download", "unit.csv");link.click();
},