- A+
所属分类：Web前端
如何使用vuejs和element-ui实现文件的上传与下载
1、文件上传el-upload
<el-upload class="upload-style" :action="UploadListUrl()" :show-file-list="ifImportSucess" :on-success="handleImportSuccess" :headers="importHeader" > <el-button class="import-btn">数据导入</el-button> </el-upload>
action: 需要导入的数据源地址
headers:大多数情况下，前后端接口请求会有加密token处理，这时候就需要修改对应的header请求头
on-success: 上传成功之后的一些处理
2、文件的下载
<el-button class="import-btn" @click="handleDownListModelClick">下载模板</el-button>
直接通过点击事件来触发需要下载的接口地址
需要注意的是，如果对接的后端接口没有进行二进制数据处理，则需要在请求头中添加
responseType = 'blob' // 与headers是平级的
通过点击事件--调用接口请求，返回对应的二进制编码，（有可能接口已经处理过），那直接转换成我们需要的下载URL即可
// 下载模板 async handleDownListModelClick () { try { const res = await this.$store.dispatch('rights/downloadListModel') console.log(res)
// 接口未处理二进制 // const blob = new Blob([res.data], { // type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' // }) const downloadElement = document.createElement('a') const href = window.URL.createObjectURL(res) // 创建下载的链接 downloadElement.href = href downloadElement.download = `模板.xlsx` // 下载后文件名 document.body.appendChild(downloadElement) downloadElement.click() // 点击下载 document.body.removeChild(downloadElement) // 下载完成移除元素 window.URL.revokeObjectURL(href) // 释放掉blob对象 if (res) { this.$message({ type: 'success', message: '下载成功' }) } } catch (err) { console.warn(err) } },
注意，如果项目中使用了mock.js需要在vuejs项目中的main.js中注释掉，不然返回的二进制编码会带入mock的数据导致无法正确转码，具体原因。。。还在研究中。
以上就是，基于elemen-ui的文件的上传与下载。
