|
1、文件上傳el-upload <el-upload class="upload-style" :action="UploadListUrl()" :show-file-list="ifImportSucess" :on-success="handleImportSuccess" :headers="importHeader" > <el-button class="import-btn">數(shù)據(jù)導(dǎo)入</el-button> </el-upload> action: 需要導(dǎo)入的數(shù)據(jù)源地址 headers:大多數(shù)情況下，前后端接口請求會有加密token處理，這時候就需要修改對應(yīng)的header請求頭 on-success: 上傳成功之后的一些處理 2、文件的下載 <el-button class="import-btn" @click="handleDownListModelClick">下載模板</el-button> 直接通過點(diǎn)擊事件來觸發(fā)需要下載的接口地址 需要注意的是，如果對接的后端接口沒有進(jìn)行二進(jìn)制數(shù)據(jù)處理，則需要在請求頭中添加 responseType = 'blob' // 與headers是平級的 通過點(diǎn)擊事件--調(diào)用接口請求，返回對應(yīng)的二進(jìn)制編碼，（有可能接口已經(jīng)處理過），那直接轉(zhuǎn)換成我們需要的下載URL即可 // 下載模板
async handleDownListModelClick () {
try {
const res = await this.$store.dispatch('rights/downloadListModel')
console.log(res)
// 接口未處理二進(jìn)制
// const blob = new Blob([res.data], {
// type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
// })
const downloadElement = document.createElement('a')
const href = window.URL.createObjectURL(res) // 創(chuàng)建下載的鏈接
downloadElement.href = href
downloadElement.download = `模板.xlsx` // 下載后文件名
document.body.appendChild(downloadElement)
downloadElement.click() // 點(diǎn)擊下載
document.body.removeChild(downloadElement) // 下載完成移除元素
window.URL.revokeObjectURL(href) // 釋放掉blob對象
if (res) {
this.$message({
type: 'success',
message: '下載成功'
})
}
} catch (err) {
console.warn(err)
}
},注意，如果項(xiàng)目中使用了mock.js需要在vuejs項(xiàng)目中的main.js中注釋掉，不然返回的二進(jìn)制編碼會帶入mock的數(shù)據(jù)導(dǎo)致無法正確轉(zhuǎn)碼，具體原因。。。還在研究中。 以上就是，基于elemen-ui的文件的上傳與下載。 |
|
|
