在使用Vant中Uploader過程中遇到的坑：圖片狀態更改等
圖片允許多張上傳，在使用file.status時總是不生效，直接跳轉到成功狀態，後來嘗試加入了定時器；同時多張上傳時採用判斷數組的方式
<van-uploader
accept=”*”
v-model=”fileList”
multiple
:max-count=”4″
:after-read=”afterRead”
:before-read=”beforeRead”
/>
在下方使用時：
// 圖片上傳後回調
beforeRead(file) {
if (!file.type.startsWith(‘image’) && !file.type.startsWith(‘video’)) {
Toast.fail(‘請上傳圖片或視頻’)
return false
} else if (file.size > 104857600) {
Toast.fail(‘選擇上傳內容不能超過100M’)
return false
} else {
return true
}
},
setUpload(file) {
let that = this
setTimeout(() => {
let config = {
headers: {
//添加請求頭
‘Content-Type’: ‘multipart/form-data’,
},
}
let deviceFile = []
let params = new FormData()
if (Array.isArray(file)) {
//因為該組件單選是對象，多選是數組
deviceFile = file
console.log(deviceFile, ‘deviceFile’)
} else {
deviceFile.push(file)
}
deviceFile.map((item) => {
//files是後台參數name字段對應值
params.append(‘file’, item.file)
})
// 文件上傳狀態
Toast(‘文件正在上傳請等候，請收到上傳成功提示後再關閉頁面！’)
//添加上傳狀態，避免用戶在上傳未完成時點擊提交按鈕
this.isLoading = false
// params.append(‘file’, file.file)
this.$http({
// 這裡填寫的是上傳接口的內容
})
.then((res) => {
if (res.data.code == 0) {
Toast.success(‘上傳成功!’)
// 文件成功狀態
if (Array.isArray(file)) {
file.forEach((item) => {
item.status = ‘done’
item.message = ‘上傳成功’
})
} else {
file.status = ‘done’
file.message = ‘上傳成功’
}
this.isLoading = true
}
res.data.data.map((item) => {
that.fileid.push(item.fileid)
})
})
.catch()
file.status = ”
file.message = ”
}, 1000)
},
afterRead(file) {
// 文件上傳狀態
if (Array.isArray(file)) {
file.forEach((item) => {
item.status = ‘uploading’
item.message = ‘上傳中…’
this.setUpload(file)
})
} else {
file.status = ‘uploading’
file.message = ‘上傳中…’
this.setUpload(file)
}
},
