评论

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

粘贴帝之友

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

经过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
                }
            })
        })
    }
})


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

async await

要点:

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

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

标准版

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
      }
    })
  }
})


新手最爱一锅炖版(不推荐)

为什么不推荐呢,因为选择图片并不意味着要上传图片,用户还没进行最终的确定操作(不过可以用来了解async await)

onLoad() {
    this.imgList = []
    wx.chooseImage({
      success: async res => {
        this.TFP = res.tempFilePaths
        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
          }
        })
      }
    })
  }



==========================end==========================

最后一次编辑于  2020-05-17  
点赞 12
收藏
评论

12 个评论

  • huigezizj
    huigezizj
    2020-04-18

    async btn() 这个是干啥用的

    2020-04-18
    赞同 1
    回复 1
    • 拎包哥
      拎包哥
      2020-04-30
      方法名前的async声明,可以让方法内的await操作合法
      2020-04-30
      回复
  • Admin ²º²⁴
    Admin ²º²⁴
    2020-03-03

    很好很好,感谢分享!

    2020-03-03
    赞同 1
    回复 4
    • 拎包哥
      拎包哥
      2020-03-03
      也感谢你的分享啊哈哈
      2020-03-03
      回复
    • Admin ²º²⁴
      Admin ²º²⁴
      2020-03-24回复拎包哥
      再次搜索到这篇文章,感觉还是了解学习Promise.all的经典教程。转发分享给有需要的人了。
      2020-03-24
      回复
    • Admin ²º²⁴
      Admin ²º²⁴
      2020-03-24
      还有await的使用方法。
      2020-03-24
      回复
    • 拎包哥
      拎包哥
      2020-03-26
      哈哈,谢谢您
      2020-03-26
      回复
  • 理想
    理想
    2021-07-22

    期待作者在标准版上多写点注释,比如像我这种还很菜的,很多代码用法还希望从这个代码了解一下,嘻嘻

    2021-07-22
    赞同
    回复
  • momo
    momo
    2020-03-10

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

    2020-03-10
    赞同
    回复 2
    • 拎包哥
      拎包哥
      2020-03-14
      你好,修改过来了,你看有没有好点
      2020-03-14
      回复
    • Stephen
      Stephen
      2020-04-08
      上传顺序可以不用数组 push 结果 ,使用 map结构的键值对就好了
      2020-04-08
      回复
  • Stephen
    Stephen
    2020-03-06

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

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

    厉害了

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

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

    厉害了

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

    2020-02-28
    赞同
    回复
  • Choice
    Choice
    2020-02-28

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

    2020-02-28
    赞同
    回复 2
    • 拎包哥
      拎包哥
      2020-02-28
      刚去看了一下,把完整代码贴上来吧。或者你直接用我代码就行了,很有可能是你图片没上传完就上传数据了
      2020-02-28
      回复
    • Choice
      Choice
      2020-02-28回复拎包哥
      我能返回获取到完整的FILE ID到数组中 一个没漏就是 只有用db.collection的时候上传不了数据库
      2020-02-28
      回复
  • 小肥羊🍊
    小肥羊🍊
    2020-02-27

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

    2020-02-27
    赞同
    回复 1
    • 拎包哥
      拎包哥
      2020-02-27
      2020-02-27
      1
      回复

正在加载...

登录 后发表内容