图片允许多张上传，在使用file.status时总是不生效，直接跳转到成功状态，后来尝试加入了定时器；同时多张上传时采用判断数组的方式
<van-uploader
accept="*"
v-model="fileList"
multiple
:max-count="4"
:after-read="afterRead"
:before-read="beforeRead"
/>
在下方使用时：
// 图片上传后回调
beforeRead(file) {
if (Array.isArray(file)) {
file.forEach((item) => {
console.log(item, '11111')
if (
!item.type.startsWith('image') &&
!item.type.startsWith('video')
) {
Toast.fail('请上传图片或视频')
return false
} else if (item.size > 104857600) {
Toast.fail('选择上传内容不能超过100M')
return false
} else {
return true
}
})
return true
} else {
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 = '上传中...'
setTimeout(() => {
this.setUpload(file)
}, 1000)
})
} else {
file.status = 'uploading'
file.message = '上传中...'
setTimeout(() => {
this.setUpload(file)
}, 1000)
}
},
本文暂时没有评论，来添加一个吧(●'◡'●)