【Vue】多图上传时,选择的图片顺序和展示的图片顺序不一致
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
问题分析:
上传多图时,由于上传后台的时间不同,导致上传时选择的图片和返回显示的图片顺序不一致。
栗子在现:
选择顺序依次为:花-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)
}
}
}
}
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献3条内容
所有评论(0)