elementUI上傳excel文件，並攜帶多個參數

參考鏈接： ElementUI的upload組件手動上傳，並攜帶參數和excel文件流提交給后台

（以下內容均來自參考鏈接）

使用場景：

選取好excel文件后，再把導入的excel文件和參數同時提交給服務器，需要用到文件的手動上傳，但是直接拷貝官網的demo會出現問題，下面會具體說明要注意的問題點。

 

 

 index.vue

<el-form ref="importList" :rules="ImportRules" :model="importList" label-position="left" label-width="100px"
               style="width:70%;margin-left:50px;">
        <el-form-item label="平台號：" prop="platNum">
          <el-input v-model="importList.platNum" clearable maxlength="50" placeholder="請輸入平台號" size="mini"  style="width: 90%"/>
        </el-form-item>
        <el-form-item label="任務名稱：" prop="taskName">
          <el-input v-model="importList.taskName" clearable maxlength="50" placeholder="請輸入任務名稱" size="mini"  style="width: 90%"/>
        </el-form-item>
        <el-form-item label="Excel文件：" prop="file">
          <el-upload
            class="upload-demo"
            ref="upload"
            multiple
            accept=".xls"
            action=""
            :with-credentials="true"
            :http-request="httpRequest"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :on-change="fileChange"
            :on-success="upFile"
            :file-list="fileList"
            :data="getUploadList"
            :auto-upload="false">
            <el-button slot="trigger" size="small" type="primary">選取文件</el-button>
            <div slot="tip" class="el-upload__tip" style="display: inline-block;margin-left: 20px">只能上傳xls格式的 excel文件</div>
          </el-upload>
        </el-form-item>
</el-form>
 
<div slot="footer" class="dialog-footer">
        <el-button @click="cancelFinishPlatform">取消</el-button>
        <el-button style="margin-left: 10px;" type="success" @click="submitUploadList">上傳到服務器</el-button>

　　事件代碼：

// param是自帶參數。 this.$refs.upload.submit() 會自動調用 httpRequest方法.在里面取得file
httpRequest(param) {
  console.log(param)
  let fileObj = param.file // 相當於input里取得的files
  let fd = new FormData()// FormData 對象
  fd.append('file', fileObj)// 文件對象
  fd.append('platNum', this.importList.platNum)
  fd.append('taskName', this.importList.taskName)
 
  let url = process.env.CMS1_BASE_API + 'cdnDel/uploadExcel'
  let config = {
    headers: {
     'Content-Type': 'multipart/form-data'
    }
  }
  axios.post(url, fd, config).then(res=>{
   if(res.code===0){
     this.submitForm();//提交表單
   }
})    

　

手動上傳的話，action 可以不用關注咯。

:auto-upload="false" 設置為flase ,為手動上傳。

upload組件注意點：

1. 選取好文件后，如何觸發上傳到服務器的操作呢？

我們可以使用官網提供的 submit() 方法

this.$refs.upload.submit();

　但是要注意執行submit方法后，他會觸發upload組件中的 http-request ，而 httpRequest 這個方法是需要你自己去定義的,實例請見上面👆的代碼，親測可用。

:http-request="httpRequest"

　官網定義如下：

2. 注意在增加文件和刪除文件時，對 :file-list 上傳的文件列表進行相應的增減

<el-upload
     :on-remove="handleRemove"
     :on-change="fileChange"
     :file-list="dataList"
     :auto-upload="false">
      <el-button slot="trigger" size="small" type="primary">選取文件</el-button>
      <div slot="tip" class="el-upload__tip" style="display: inline-block;margin-left: 20px">只能上傳xls格式的 excel文件</div>
</el-upload>

　　

// fileList 是文件列表發生變化后，返回的修改后的列表對象，這里直接賦值就好啦！
fileChange(file, fileList) {
  // console.log(file.raw)
  this.dataList = fileList
},

　　on-change 是文件狀態改變時的鈎子，添加文件、上傳成功和上傳失敗時都會被調用

3. 注意上傳時，請求頭要修改為 ‘multipart/form-data’

　我們需要創建一個 FormData 對象，以表單的形式上傳參數和excel文件

　

// param是自帶參數。 this.$refs.upload.submit() 會自動調用 httpRequest方法.在里面取得file
httpRequest(param) {
  console.log(param)
  let fileObj = param.file // 相當於input里取得的files
  let fd = new FormData()// FormData 對象
  fd.append('file', fileObj)// 文件對象
  fd.append('platNum', this.importList.platNum)
  fd.append('taskName', this.importList.taskName)
 
}

　

4. 如果把提交函數用在http-request鈎子中，fileList多長就執行請求多少次接口，依舊是無法做到只請求一次上傳多文件