首先，我的需求是通過導(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)槲覀冊赼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ù) 這邊判斷我使用的是自定義的請求頭
      if(response.headers['custom-status']==2){
        self.msgWarn("請查看導(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代碼 上傳請求
export function uploadExcel(param) {
  return request({
    url: 'xxxx/uploadExcel',
    method: 'post',
    headers: {
      'Content-Type': 'multipart/form-data'
    },
    data: param,
    responseType: 'blob'
  })
}