首先说明一下，我们这次主要用的还是iview的upload上传组件，下面直接上代码
<Upload
ref="upload"
multiple='true' //是否支持多文件上传
:show-upload-list="true" //显示上传的文件
:before-upload="handleUpload" //上传前需要的一些操作
:data="uploadFile" //上传的文件保存的地方
:on-success="uploadSuccess" //上传成功时调用的方法
:headers='{"Authorization": session}' //这里是设置的请求头token
:action="actionUrl" //这是上传时的后台接口
>
选择Excel文件：<Button icon="ios-cloud-upload-outline">选择上传文件</Button>
</Upload>
<!-- <Button type="primary" @click="clear" >清空上传记录</Button> //这里是手动上传的时候 清空之前的上传记录 或者点击的错误文件-->
<!-- <Button type="primary" @click="upload" >点击上传文件</Button> //如果不设置则为自动上传，这里可以设置手动上传文件-->
下面是上传时我们需要调用的一些方法
importExcel(url){
this.modalImport = true;
this.$refs.upload.clearFiles();//清除上次上传记录
this.file = [];
this.uploadFile = [];
},
uploadSuccess(response, file, fileList){
this.$Message.info(response.msg);
// this.modalImport = false
debugger
this.init(0, 20);
},
clear(){
this.$refs.upload.clearFiles();//清除上次上传记录
},
handleUpload (file) { // 上传文件前的事件钩子
// 选择文件后 这里判断文件类型 保存文件 自定义一个keyid 值 方便后面删除操作
let keyID = Math.random().toString().substr(2);
file['keyID'] = keyID;
// 保存文件到总展示文件数据里
this.file.push(file);
// 保存文件到需要上传的文件数组里
this.uploadFile.push(file)
// 返回 falsa 停止自动上传 我们需要手动上传
//如果需要手动上传文件，需要把这里注释放开并放开上面代码块中的被注释的两个按钮，就可以进行手动上传了
//return false
},
upload () { // 上传文件
for (let i = 0; i < this.uploadFile.length; i++) {
let item = this.file[i]
this.$refs.upload.post(item);
}
},
上传文件大概就是这样了，关键的代码部分也给出了注释，希望能帮到大家。
既然有了上传文件，那就顺便把下载文件的也一起说了吧 ！其实下载文件比较简单点，直接看代码吧！！！
exportExcel(url){
if(this.data.length == 0){
this.$Message.info('当前列表暂无数据！')
return;
}
let url1 = this.GLOBAL.BASE_URL + url,
sessionId = Cookies.get('status'),
form = $('<form></form>').attr('action',url1).attr('method','post');
form.append($('<input></input>').attr('type','hidden').attr('name','Authorization').attr('value',sessionId));
form.appendTo('body').submit().remove();
},
下载文件主要就是请求头的设置，这里不是iview的下载文件组件，是自己常用的一种，如果有更好的方法欢迎大家踊跃指出
下面是我的公众号，欢迎大家关注，可以一起学习一起进步：
