欢迎光临
我的个人博客网站

如何使用elemen-ui实现文件的上传与下载

如何使用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的文件的上传与下载。

赞(0) 打赏
未经允许不得转载:张拓的天空 » 如何使用elemen-ui实现文件的上传与下载
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏