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