- 上传 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中，本项目有置空需求【代码略】，请按需保留jsimport HTTP_API from ‘@/httpApi’ // 封装好的axios:get post请求（含headers和拦截器等【代码略】）// methodsfileExceed () { 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>jsimport 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字段中含文字会有问题，后端给我日期数字，相同的文字部分前端拼接）