前情回顧說點廢話。。。
1、項目當中遇到需要上傳多個圖片，一次選取多個圖片。但是吧el-upload默認只能一個一個傳，每次上傳成功還的自己去push，一個一個去判斷。
2、關鍵是后臺給的接口，要一次性接收一堆，無奈之下只能去網上搜索，大佬們都是給的代碼片段無法直接使用。
3、經過各種搬運后實現了效果，閑下來就想著自己寫一下我最后在代碼中實現方法吧。大家共同學習進步，我也鞏固一下知識點！有問題的地方歡迎各位大佬指正！
話不多說直接擼代碼?。?！
html部分
// :auto-upload="false" 這一句必須加上，阻止默認上傳事件
// :http-request="BSuploadFile" 上傳到服務器的方法
// :before-upload="beforeUpload" 上傳到服務器前校驗文件，選擇文件的時候不校驗，點擊“上傳到服務器”調用upload()方法的時候執(zhí)行
// :on-preview="handlePictureCardPreview" 預覽圖片
// :on-remove="BShandleRemove" 刪除圖片
// :on-change="changeFileLength" 選擇文件后執(zhí)行
// multiple
// :file-list="BSfileList"
<el-upload
list-type="picture-card"
class="upload-demo"
action=""
ref="upload"
:auto-upload="false"
:http-request="BSuploadFile"
:before-upload="beforeUpload"
:on-preview="handlePictureCardPreview"
:on-remove="BShandleRemove"
:on-change="changeFileLength"
multiple
:file-list="BSfileList">
<i class="el-icon-plus"></i>
<div slot="tip" class="el-upload__tip">
只能上傳jpg/png文件，且不超過1Mb
<el-button @click="upload" type="success">上傳到服務器</el-button>
</div>
</el-upload>?喏，沒選擇文件的時候就是下面的樣子
?
?選完文件以后是下面的樣子
js部分
// 上傳到服務器前的校驗
beforeUpload(file) {
console.log('上傳前：',file)
// 打印出來看一下格式，file流有時候在file.raw中
if (file&&file.type) {
const isJPG = (file.type === 'image/jpeg' || file.type === 'image/png' || file.raw.type === 'image/jpeg' || file.raw.type === 'image/png');
const isLt1M = file.size / 1024 / 1024 < 1;
if (!isJPG) {
this.$message.error('上傳頭像圖片只能是 JPG、PNG 格式!');
}
if (!isLt1M) {
this.$message.error('上傳頭像圖片大小不能超過 1MB!');
}
return isJPG && isLt1M;
} else {
this.$message.error('文件格式錯誤，請檢查！');
return false
}
},
// 選擇文件，修改當前文件列表長度后
changeFileLength(singleFile, fileList){
console.log('修改當前文件', singleFile, fileList)
this.filesLength = fileList.length
this.BSfileList = fileList
},
// 用戶點擊上傳調用
async upload(){
console.log('點擊上傳')
// 觸發(fā)上傳 調用配置 :http-request="BSuploadFile"
// 即觸發(fā) uploadFile函數
await this.$refs.upload.submit();
// 上傳完成后執(zhí)行的操作 ...
},
// 自定義上傳文件，也就是上傳到服務器的方法
BSuploadFile(param) {
console.log('開始上傳')
// 當BSfileList長度等于用戶需要上傳的文件數時進行上傳
if (this.BSfileList.length == this.filesLength){
// 創(chuàng)建FormData上傳
let fd = new FormData()
// 將全部文件添加至FormData中
this.BSfileList.forEach(file => {
// 第一個參數可改，看后臺接口接收什么就改成什么。
// 第二個參數，是沒一個文件的文件流，有時候是file，有時候是file.raw
// 打印出來，根據時間情況來傳入。我也不知道為什么，可能是elm版本封裝的json格式不一樣
fd.append('file', file.raw)
})
// 配置請求頭，基本上所有上傳文件用的都是form-data類型
const config = {
headers: {
"Content-Type": "multipart/form-data",
}
}
// 上傳文件，看自己怎么用，沒封裝過ajx就用全局axios
// this.axost.post("/abc/upload", fd, config).then(res => {
multipleTbrandCultureFile(fd, config).then(res => {
/*上傳成功處理*/
console.log(res)
this.form.abcFiles = res.data
}).catch(err => {/*報錯處理*/});
}
}
改進文章來源：http://www.zghlxwxcb.cn/news/detail-517893.html
實踐出真理，在使用中發(fā)現的問題，上面的寫法，校驗只會出現彈窗，功能不對，優(yōu)化后的代碼如下。文章來源地址http://www.zghlxwxcb.cn/news/detail-517893.html
// 自定義上傳文件，也就是上傳到服務器的方法
BSuploadFile(param) {
console.log('開始上傳')
// 在此處加上校驗
// 刪除html中的:before-upload="beforeUpload"
const isgo = this.beforeUpload(file.file)
if (isgo) {
// 當BSfileList長度等于用戶需要上傳的文件數時進行上傳
if (this.BSfileList.length == this.filesLength){
// 創(chuàng)建FormData上傳
let fd = new FormData()
// 將全部文件添加至FormData中
this.BSfileList.forEach(file => {
// 第一個參數可改，看后臺接口接收什么就改成什么。
// 第二個參數，是沒一個文件的文件流，有時候是file，有時候是file.raw
// 打印出來，根據時間情況來傳入。我也不知道為什么，可能是elm版本封裝的json格式不一樣
fd.append('file', file.raw)
})
// 配置請求頭，基本上所有上傳文件用的都是form-data類型
const config = {
headers: {
"Content-Type": "multipart/form-data",
}
}
// 上傳文件，看自己怎么用，沒封裝過ajx就用全局axios
// this.axost.post("/abc/upload", fd, config).then(res => {
multipleTbrandCultureFile(fd, config).then(res => {
/*上傳成功處理*/
console.log(res)
this.form.abcFiles = res.data
}).catch(err => {/*報錯處理*/});
}
}
}
到了這里，關于【學習記錄21】Vue+ElementUI el-upload多文件上傳，一次請求上傳多個文件！的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
