评论

云开发批量上传图片,上传完图片再上传数据库 [即抄即用,拎包入住]

粘贴帝之友

大家好,又是我拎包哥,今天我们来实现在云开发中批量上传图片。

经过Stephen哥的指正,我改用了Promise.all的方法来达到目的。

Promise.all的作用就是等待所包含的promise函数结束后再执行下一步逻辑,非常方便好用!
const db = wx.cloud.database()
const test = db.collection('test')
Page({
    onLoad() {
        this.imgList = []
        wx.chooseImage({
            success(res) => {
                this.TFP = res.tempFilePaths
            }
        })
    },

    btn() {
        let promiseMethod = new Array(this.TFP.length)
        for (let i = 0; i < this.TFP.length; i++) {
            promiseMethod[i] = wx.cloud.uploadFile({
                cloudPath'img' + i + '.png',
                filePaththis.TFP[i]
            }).then(res => {
                this.imgList.push(res.fileID)
            })
        }

        Promise.all([...promiseMethod]).then(() => {
            test.add({
                data: {
                    imgListthis.imgList
                }
            })
        })
    }
})


--------------------------------------我是分割线--------------------------------------

要点:

  1. ctrl c + ctrl v
  2. 这里用了await阻塞在wx.cloud.uploadFile前面,避免还没上传完图片就往数据库插入数组。减少了then里的代码,美观逼格高。嘻嘻嘻。
  3. await wx.cloud.uploadFile不能放在wx.chooseImage里,如果可以的话,请告诉我怎么做,谢谢!

欢迎交流,指出错误,我立刻修改么么哒。

async await

btn
--------------------------------------------------
const db = wx.cloud.database()
const test = db.collection('test')
Page({
  onLoad() {
    this.imgList = []
      wx.chooseImage({
      success: (res) => {
        this.TFP = res.tempFilePaths        
      }
    })
  },
  
  async btn() {
    this.imgList = []
    console.log(this.TFP)
    for (let i = 0; i < this.TFP.length; i++) {
      await wx.cloud.uploadFile({
        cloudPath: 'img' + i + '.png',
        filePath: this.TFP[i]
      }).then(res => {
        this.imgList.push(res.fileID)
      })
    }
    test.add({
      data: {
        imgList: this.imgList
      }
    })
  }
})


=v=

最后一次编辑于  03-14  
点赞 5
收藏
评论

10 个评论

  • Admin²⁰²⁰
    Admin²⁰²⁰
    03-03

    很好很好,感谢分享!

    03-03
    赞同 1
    回复 4
    • 阿浩🐔 。。。
      阿浩🐔 。。。
      03-03
      也感谢你的分享啊哈哈
      03-03
      回复
    • Admin²⁰²⁰
      Admin²⁰²⁰
      星期二 15:19回复阿浩🐔 。。。
      再次搜索到这篇文章,感觉还是了解学习Promise.all的经典教程。转发分享给有需要的人了。
      星期二 15:19
      回复
    • Admin²⁰²⁰
      Admin²⁰²⁰
      星期二 15:22
      还有await的使用方法。
      星期二 15:22
      回复
    • 阿浩🐔 。。。
      阿浩🐔 。。。
      星期四 15:05
      哈哈,谢谢您
      星期四 15:05
      回复
  • 李松
    李松
    03-10

    这样保证不了上传的顺序吧

    03-10
    赞同
    回复 1
    • 阿浩🐔 。。。
      阿浩🐔 。。。
      03-14
      你好,修改过来了,你看有没有好点
      03-14
      回复
  • Stephen
    Stephen
    03-06

    多张图片为啥不同时异步上传?减少等待时间

    03-06
    赞同
    回复 9
    • 阿浩🐔 。。。
      阿浩🐔 。。。
      03-06
      因为我这里相当于填写资料后点击确认的操作,总不能图片还没上传完就提示资料上传成功吧哈哈。。。
      03-06
      回复
    • Stephen
      Stephen
      03-06回复阿浩🐔 。。。
      我的意思是用 Promise.all ,你写的这个时间长不说,网络异常等失败情况,也会 add 到数据库
      03-06
      2
      回复
    • 阿浩🐔 。。。
      阿浩🐔 。。。
      03-06
      谢谢提醒!等我研究好Promise.all后我便将更好的方法写上去嘿嘿
      03-06
      回复
    • 阿浩🐔 。。。
      阿浩🐔 。。。
      03-06回复Stephen
      老哥,我把改后的代码放在文章里了,你看是这个意思吗
      03-06
      回复
    • Stephen
      Stephen
      03-06回复阿浩🐔 。。。
      差不多是这么个意思吧
      03-06
      1
      回复
    查看更多(4)
  • 暮雨
    暮雨
    02-28

    666

    <p style="display: tail;text-align: left;border-top: 0.5px solid rgba(0,0,0,.06);padding-top: 5px;margin-top: 15px;" title="tail"><span style="width: fit-content;background: linear-gradient(45deg, red, rgb(135, 230, 255), rgb(255, 135, 230));font-size: 10px;color: transparent;-webkit-background-clip: text;"><span title="尊贵的 SVVVIP 特权">--↓↓👍如果觉得有帮助的话请点个【赞】吧(唏嘘也有小尾巴了,可惜是假的)</span></span></p>
    
    02-28
    赞同
    回复
  • 暮雨
    暮雨
    02-28

    厉害了

    --↓↓👍如果觉得有帮助的话请点个【赞】吧(唏嘘也有小尾巴了,可惜是假的)

    02-28
    赞同
    回复
  • 暮雨
    暮雨
    02-28

    厉害了

    --↓↓👍如果觉得有帮助的话请点个【赞】吧(唏嘘也有小尾巴了,可惜是假的)

    02-28
    赞同
    回复
  • Roy Wang
    Roy Wang
    02-28

    能帮我看看我的问题嘛,我的和你的内容有点像

    02-28
    赞同
    回复 2
    • 阿浩🐔 。。。
      阿浩🐔 。。。
      02-28
      刚去看了一下,把完整代码贴上来吧。或者你直接用我代码就行了,很有可能是你图片没上传完就上传数据了
      02-28
      回复
    • Roy Wang
      Roy Wang
      02-28回复阿浩🐔 。。。
      我能返回获取到完整的FILE ID到数组中 一个没漏就是 只有用db.collection的时候上传不了数据库
      02-28
      回复
  • 鹤仙姑
    鹤仙姑
    02-27

    往数据库插入的代码呢??

    02-27
    赞同
    回复 1
    • 阿浩🐔 。。。
      阿浩🐔 。。。
      02-27
      02-27
      回复
  • 鹤仙姑
    鹤仙姑
    02-27

    看后有收获,非常感谢分享。

    02-27
    赞同
    回复 1
  • 何芷怡
    何芷怡
    02-27
    在CSDN找了好久没找到。。。🙏感谢
    02-27
    赞同
    回复
登录 后发表内容