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字段中含文字会有问题，后端给我日期数字，相同的文字部分前端拼接）
发表回复