如何使用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的文件的上傳與下載。