haohao_blog

最近用vue做微信公众号开发，遇到多张图片上传问题，记录一下。如果有小伙伴，还没有看过微信js-sdk，先熟悉一下微信js-sdk 。
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

上图是微信公众号jssdk上传图片接口，可以看出来localId只能接受单个值，而我们需要上传多张图片，该怎么办呢？废话不多说，上代码：

 // 微信从相册中选择图片
    wxChooseImg() {
      return new Promise((resolve, reject) => {
        this.$wx.chooseImage({
          count: 9, // 默认9
          sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ['camera', 'album'], // 可以指定来源是相册'album'还是相机'camera'，默认二者都有
          success: (res) => {
            resolve(res.localIds)
          },
          fail: (err) => {
            console.log('选择图片时错误：', err)
            // callBack('')
          }
        })
      })
    },

 //微信上传图片 
wxUploadImage(localId) {
      return new Promise((resolve, reject) => {
        this.$wx.uploadImage({
          localId: localId, // 需要上传的图片的本地ID，由chooseImage接口获得
          isShowProgressTips: 1, // 默认为1，显示进度提示
          success: (res) => {
            resolve(res)
          },
          fail: (err) => {
            reject(err)
            console.log('上传图片时错误：', err)
          }
        })
      })
    }

 async wxUploadRes() {
      const uploadAll = await this.wxChooseImg()
      this.list.push(...uploadAll)
      // 微信多张上传,注释内容为一开始的错误写法，用的Promise.all
      // const getWxServerIds = await Promise.all(uploadAll.map(async(item) => {
      //   return await this.wxUploadImage(item)
      // }))
      // this.wxServerImgInfo = await this.PromiseForEach(uploadAll, this.wxUploadImage)
      const result = await this.PromiseForEach(uploadAll, this.wxUploadImage)
      //业务逻辑
       ........
    },
 async PromiseForEach(objects, asyncDosometing) {
      const result = []
      for (let i = 0; i < objects.length; i++) {
        try {
          result.push(await asyncDosometing(objects[i]))
        } catch (err) {
          return err
        }
      }
      return result
    },

之所以会出现注释的错误写法，当时想的是用Promise.all将所有请求发送为微信服务器。但是真实情况，微信那边需要第一次请求，返回成功，才进行第二次才操作，以此类推… 是串行的方式，不是并行的方式….