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-error
file-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()
document.body.removeChild(link)
window.URL.revokeObjectURL(url)
},
js--后端返回文档流
import HTTP_API from '@/httpApi' // 封装好的axios:get post请求(含headers和拦截器等【代码略】)
// methods
// 导出excel
let selectedParams = {
ids : this.idList.join(',') //导出条件(按照选中的ID来导出,按实际需求)
}
// 解决文档流乱码问题设置响应类型
HTTP_API.exportSelected(selectedParams, {responseType: 'arraybuffer'}).then(res => {
let url = window.URL.createObjectURL(new Blob([res], {type: "application/vnd.ms-excel;charset=UTF-8"}))
let link = document.createElement('a')
link.style.display ='none'
link.href = url
link.setAttribute('download', '记录列表.xls')
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
window.URL.revokeObjectURL(url)
});
3. 结束语
- 上传action必须有,空串也好,随便写点也行,反正得有
- element的提示允许html代码,但是要设置dangerouslyUseHTMLString为true
- 上传的请求成功(状态码200)不等于上传成功,element的√图标,需要用js实现显示隐藏
- 下载时文件名称为动态时,请求后端协助在响应的头部增加filename字段(filename字段中含文字会有问题,后端给我日期数字,相同的文字部分前端拼接)
- responseType设置为blob或者arraybuffer从结果上是一样的。点击跳转responseType文档
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。