vue2 后端的接口很老不支持批量上传 只能由前端处理 将上传请求封装为 Promise 并放在数组里
const uploadPromises = []
const uploadPromise = new Promise((resolve, reject) => {
service
.post('', data, {
headers: {
'Content-Type': 'multipart/form-data',
}
})
.then(res => {
if (res.data.code === 200) {
resolve(res)
} else {
reject(res)
}
})
.catch(err => {
reject(err)
})
})
uploadPromises.push(uploadPromise)
用Promise.allSettled()方法发请求
Promise.allSettled(uploadPromises).then(results => {
const fulfilled = results.filter(result => result.status === 'fulfilled')
const rejected = results.filter(result => result.status === 'rejected')
if (rejected.length > 0) {
this.$message.error({ message: rejected.length + '张图片上传出错',
}
if (fulfilled.length > 0) {
this.$message.success(fulfilled.length + '张图片上传成功')
}
})
Promise.allSettled()对比Promise.all()的特点在于 可以处理多个异步操作，并且等待所有的 Promise 完成（无论是成功还是失败），而不像 Promise.all() 那样一旦某个 Promise 失败就立刻返回。
最终返回一个新的 Promise，该 Promise 成功时会返回一个数组，数组中的每一项也都是一个对象，表示对应的 Promise 的执行结果。
上传就完成了 下面来处理提示
用的是Element的Message,由于一次性异步请求接口 同时返回了多个结果 提示框会被新的提示框遮挡 解决方法是给成功和失败的提示框加上setTimeout,并且在前一个提示框消失时让下一个展示 最终代码是:
Promise.allSettled(uploadPromises).then(results => {
console.log(results)
const fulfilled = results.filter(result => result.status === 'fulfilled')
const rejected = results.filter(result => result.status === 'rejected')
if (rejected.length > 0) {
setTimeout(() => {
this.$message.error({ message: rejected.length + '张图片上传出错',
duration: 1200 })
}, 1500)
}
if (fulfilled.length > 0) {
setTimeout(() => {
this.$message.success(fulfilled.length + '张图片上传成功')
}, 3200)
}
})
