使用場景：
選取好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>
</div>
// 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)
}