vue 文件导入导出/上传下载并与后端交互操作_vue前端上传csv文件 后端怎么接受

上传/导入

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

依赖—解析文件

import Papa from 'papaparse'
1

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>
1
2
3
4
5

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){
        // csv
        Papa.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事件
    }
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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;
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

在数据传输到后台的时候，我们需要把文件信息传过去，需要的是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]);

1
2
3
4

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

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

下载/导出

通过地址下载

后端需要返回相应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>

1
2
3
4
5

或者直接

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

前端导出

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();
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22