【Vue】多图上传时,选择的图片顺序和展示的图片顺序不一致
问题分析:上传多图时,由于上传后台的时间不同,导致上传时选择的图片和返回显示的图片顺序不一致。栗子在现:选择顺序依次为:花-1、花-2、花-3、花-4返回顺序依次为:花-2、花-4、花-3、花-1解决方法:上传开始时:记录下上传时的图片信息顺序uploadFiles (files) {let postFiles = Array.prototype.slice.call(files)if (!thi
·
问题分析:
上传多图时,由于上传后台的时间不同,导致上传时选择的图片和返回显示的图片顺序不一致。
栗子在现:
选择顺序依次为:花-1、花-2、花-3、花-4
返回顺序依次为:花-2、花-4、花-3、花-1
解决方法:
上传开始时:记录下上传时的图片信息顺序
uploadFiles (files) {
let postFiles = Array.prototype.slice.call(files)
if (!this.multiple) postFiles = postFiles.slice(0, 1)
if (postFiles.length === 0) return
let resultarray = []
// postFiles 上传时图片原始list顺序
this.$emit('uploadStart', postFiles)
postFiles.forEach(file => {
this.upload(file).then(res => {
resultarray.push(res)
let progressdata = {
finshnum: resultarray.length,
totalnum: postFiles.length
}
this.$emit('uploadprogress', progressdata)
if (resultarray.length === postFiles.length) {
this.$emit('uploadSuccess', resultarray)
}
})
})
},
upload (file) {
let uploadPath = this.getUploadPath()
let fileName = file.name
let fileType = file.type
let fileSize = file.size
let lastIndex = fileName.lastIndexOf('.')
let realName = fileName.substring(lastIndex)
// 图片上传至阿里云时,异步,上传时间不同,导致返回顺序不同
return OssUpload.put(uploadPath + uuid + realName, file).then(r1 => {
let region = process.env.NODE_ENV === 'production' ? 'service-center-image.oss-cn-shanghai.aliyuncs.com' : 'service-center.oss-cn-qingdao.aliyuncs.com'
let domain = process.env.NODE_ENV === 'production' ? 'image.laodao.so' : 'image.test.laodao.so'
return {
'name': fileName,
'type': fileType,
'size': fileSize,
'url': r1.url.replace(region, domain)
}
}, () => {
return {
'name': file.name,
'url': 'error_url'
}
})
}
// 上传图片开始时
uploadStart (data) {
this.moreImageList = data
},
// 上传图片成功
uploadSuccess (data) {
let defaultImageList = []
// 返回图片按照上传图片顺序进行重新排序
for (let i = 0; i < this.moreImageList.length; i++) {
let originItem = this.moreImageList[i]
let originName = originItem.name
for (let j = 0; j < data.length; j++) {
let currentItem = data[j]
let currentName = currentItem.name
if (originName === currentName) {
let currentUrl = currentItem.url
let obj = {
name: currentName,
url: currentUrl
}
defaultImageList.push(obj)
}
}
}
}
更多推荐
已为社区贡献6条内容
所有评论(0)