Vue Element UI 实现文件excel的上传及下载2种方式（文件流及a标签）

工作上需求上传excel，下载源文件excel，上传使用的是Element ui 里的 el-upload，下载说2种方式，亲测都可以

项目样式 上传excel

html 部分

<el-form-item label="上传">
<el-upload
class="upload-demo"
ref="upload"
action="#"
:limit="1"
:http-request="uploadOk"
:on-preview="handlePreview"
:before-upload="beforeAvatarUpload"
:on-remove="handleRemove"
:file-list="fileList"
:auto-upload="true">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<div slot="tip" class="el-upload__tip">只能上传xls/xlsx文件</div>
</el-upload>
</el-form-item>

参数解释 方法解释
action 必选参数，上传的地址
:limit 最大允许上传个数
:http-request 覆盖默认的上传行为，自定义上传
:on-preview 文件上传时的钩子
:before-upload 上传文件之前的钩子
:on-remove 文件列表移除文件时的钩子
:file-list 上传的文件列表
:auto-upload 是否在选取文件后立即进行上传

JS 事件部分

// 上传前验证
beforeAvatarUpload(file) {
let Xls = file.name.split('.');
if(Xls[1] === 'xls'||Xls[1] === 'xlsx'){
return file
}else {
this.$message.error('上传文件只能是 xls/xlsx 格式!')
return false
}
},
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
},
// 上传成功
uploadOk(val){
let fd = new FormData()
fd.append('upload_file',val.file)
fd.append('dir_name','contract')
// console.log(fd.upload_file)  错误
// console.log(fd.get("upload_file")  正确
this.$post('/upload/uploadFile', fd).then((result) => {
if (result.code == 200) {
this.$message({
message: '上传成功',
type: 'success'
});
// 接收excel文件地址
this.addForm.addurl = result.data.file_url
}else{
this.message(result.msg)
}
})
},

注意一下：上传文件必须为FormData 所以这边New FormData() ，把上传文件的File填进去。
注意一点 打印console.log(FormData.file) 是打印不出来的 ,需要用 到 FormData.get(’’) ！！！！是个坑 是个坑

下载a标签方式

// 下载源文件
handleDownload: function(index, row){
if(row.contract_file_url == ''){
this.$message({
message: '没有源文件',
type: 'warning'
})
}else{
// 创建a标签
let link = document.createElement('a')
// href链接
link.setAttribute('href', row.contract_file_url)
// 自执行点击事件
link.click()
}
},

row.contract_file_url 是我从表格里拿到的下载文件地址

文件流方式

如果后台传给你的是这种东西 不要慌 你只需要

this.$get('/documentflow').then(res => {
let blob = new Blob([res], {type: "application/vnd.ms-excel"}); //res 就是文件流了
let objectUrl = URL.createObjectURL(blob);
window.location.href = objectUrl
})

这样就ok了 大胆的测试一下吧

总结

有问题欢迎留言私信，也可以留下更好的方案和思路，一起学习完善。
对你有帮助的话可以点个赞哦！！！