问题分析:

上传多图时,由于上传后台的时间不同,导致上传时选择的图片和返回显示的图片顺序不一致。

栗子在现:

选择顺序依次为:花-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 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐