首先码撰，我的需求是通過導(dǎo)入excel文件實(shí)現(xiàn)批量添加數(shù)據(jù)焙贷，因?yàn)槭褂玫氖情_源項(xiàng)目渺绒，前端使用element+vue來實(shí)現(xiàn)弄诲，所以上傳文件就使用element的上傳組件el-upload來實(shí)現(xiàn)。因?yàn)槲乙谏蟼魑募耐瑫r(shí)添加其它參數(shù)并且這個(gè)參數(shù)還是需要判斷的盯串，原生的el-upload就不支持這個(gè)操作氯檐，所以我使用它的http-request屬性，實(shí)現(xiàn)自定義上傳文件体捏。我后端使用的是springboot 上傳框架選擇的是easypoi冠摄，感興趣的可以一起探討一下。這里有個(gè)問題 就是 為什么不用 on-success函數(shù)几缭，因?yàn)閛n-success函數(shù)返回的response里面沒有headers河泳，會(huì)導(dǎo)致我在返回值里面不能拿headers進(jìn)行判斷，又因?yàn)槲覀冊(cè)赼xios里面設(shè)置了responseType為blob類型年栓，不論成功還是失敗都會(huì)返回blob類型拆挥，而我又不想在后臺(tái)直接拋出異常，所以采用自定義的方式來實(shí)現(xiàn)upload功能某抓。
html代碼：
<el-upload
class="upload-demo"
action="no"
:http-request="handleUpload"
:before-upload="beforeUpload"
:before-remove="beforeRemove"
:limit="1"
:on-exceed="handleExceed"
:file-list="fileList"
ref="upload">
<el-button size="small" type="success" :loading="loadingApply"
class="el-icon-upload" >點(diǎn)擊上傳excel</el-button>
</el-upload>
data(){
uploadFile: undefined
}
//在上傳之前把文件存一下
beforeUpload(file){
this.uploadFile = file
},
//上傳操作調(diào)用的函數(shù)
handleUpload(file){
//業(yè)務(wù)操作可以忽略
//核心操作是新建formData 然后把file添加進(jìn)去如果有其它參數(shù)繼續(xù)添加就行
//let formData = new FormData();
//formData.append('file', self.uploadFile)
//self.upload(formData) 這里如果不進(jìn)行業(yè)務(wù)處理的話可以直接調(diào)用axios調(diào)用后臺(tái)接口,我這邊返回值比較多所以進(jìn)行了拆分
let self = this
self.loadingApply=true
let formData = new FormData();
formData.append('file', self.uploadFile)
if(self.form1.type==0){
formData.append('orgType',0)
self.upload(formData)
}
if(self.form1.orgId){
formData.append('orgId',self.form1.orgId)
self.upload(formData)
}
},
upload(formData){
let self=this
uploadExcel(formData).then(
response=>{
//我這邊的業(yè)務(wù)情況是如果錯(cuò)誤的話需要返回導(dǎo)入失敗的數(shù)據(jù) 例如：導(dǎo)入5條 失敗2條
//返回一個(gè)導(dǎo)入失敗的excel里面是這兩條數(shù)據(jù) 這邊判斷我使用的是自定義的請(qǐng)求頭
if(response.headers['custom-status']==2){
self.msgWarn("請(qǐng)查看導(dǎo)入失敗的數(shù)據(jù)")
const url = window.URL.createObjectURL(new Blob([response.data]))
const link = document.createElement('a')
link.style.display = 'none'
link.href = url
// 獲取文件名
const fileName = response.headers['content-disposition'].split(';')[1].split('=')[1]
// download 屬性定義了下載鏈接的地址而不是跳轉(zhuǎn)路徑
link.setAttribute('download', fileName)
document.body.appendChild(link)
link.click()
}else{
self.msgSuccess("導(dǎo)入成功")
}
})
},
axios代碼：
// axios代碼 上傳請(qǐng)求
export function uploadExcel(param) {
return request({
url: 'xxxx/uploadExcel',
method: 'post',
headers: {
'Content-Type': 'multipart/form-data'
},
data: param,
responseType: 'blob'
})
}
