共计 2477 个字符，预计需要花费 7 分钟才能阅读完成。
1. 上传 EXCEL
Upload 组件 点击跳转到该组件官方文档
用到的 upload 组件参数
参数
说明
类型
可选
默认值
action
必选参数，上传的地址
string
—
—
file-list
上传的文件列表
array
—
[]
accept
接受上传的文件类型
string
—
—
http-request
覆盖默认的上传行为
function
—
—
limit
最大允许上传个数
number
—
—
on-exceed
文件超出个数限制时的钩子
function(files, fileList)
—
—
组件代码
html
<el-upload
style=”display: inline; margin-left: 10px;margin-right: 10px;”
action=””
:http-request=”uploadFile”
:limit=1
:on-exceed=”fileExceed”
accept=”application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel”
:file-list=”uploadList”
ref=”fileupload”>
</el-upload>
– 说明 –style: 按项目需要添加，请按需保留 action：必需，自定义上传直接给空串；非自定义，将地址赋给 action 配合属性 headers、on-success、on-error 等 http-request：自定义方法，根据请求的响应手动实现 on-success、on-errorfile-list：本项目有清空需要【代码略】ref：该上传组件放置 dialog 中，本项目有置空需求【代码略】，请按需保留
js
import HTTP_API from ‘@/httpApi’ // 封装好的 axios:get post 请求（含 headers 和拦截器等【代码略】）
// methods
fileExceed () {
this.$message.error(‘ 别贪心！一次只能上传一个哦~’);
},
// 请求成功
importSuccess (res) {
// 后端的返回码 – 上传成功
if (res.code == xxxxx) {
// 显示√图标
let e = document.getElementsByClassName(‘el-upload-list__item-status-label’);
e[0].setAttribute(‘style’, ‘display:block !important’)
// 成功提示
this.$message.success(‘ 上传成功 ’);
// 重新调用列表请求（代码略）
this.getList();
// 后端的返回码 – 上传失败
} else {
// 隐藏√图标
let e = document.getElementsByClassName(‘el-upload-list__item-status-label’);
e[0].setAttribute(‘style’, ‘display:none !important’)
// 失败提示 – 及后端返回的失败详情
this.$message.error({
dangerouslyUseHTMLString: true,
duration: 4500,
message: res.remark+’,<br/> 请删除上传失败的文件，修改后重新上传 ’
});
}
},
// 请求失败
importError (err) {
this.$message.error({
dangerouslyUseHTMLString: true,
duration: 4500,
message: ‘ 上传出现异常，请稍后重试 ’+’,<br/><br/> 异常原因：’+err
});
},
// 自定义上传
uploadFile (item) {
const form = new FormData()
form.append(‘file’, item.file)
HTTP_API.xlsx_upload(form).then(res => {
this.importSuccess(res)
}).catch(err => {
this.importError(err)
})
}
2. 下载 EXCEL
button 组件
组件代码
html
<el-button type=”primary” @click=”downTemplate” round> 下载模板 </el-button>
js
import axios from ‘axios’
// methods
// 导出模板
downTemplate () {
axios({
method: ‘get’,
url:’xxx 相对地址 xxx’,
responseType: ‘blob’
}).then(res => this.downloads(res.data, res.headers.filename))
},
// 创建模板下载链接
downloads (data, name){
if(!data){
return
}
let url = window.URL.createObjectURL(new Blob([data]))
let link = document.createElement(‘a’)
link.style.display =’none’
link.href = url
link.setAttribute(‘download’, ` 前端拼接后端返回的名字 ${name}.xlsx`)
document.body.appendChild(link)
link.click()
},
3. 结束语
上传 action 必须有，空串也好，随便写点也行，反正得有
element 的提示允许 html 代码，但是要设置 dangerouslyUseHTMLString 为 true
上传的请求成功（状态码 200）不等于上传成功，element 的√图标，需要用 js 实现显示隐藏
下载时文件名称为动态时，请求后端协助在响应的头部增加 filename 字段（filename 字段中含文字会有问题，后端给我日期数字，相同的文字部分前端拼接）
