微信JSSDK多图片上传

由于设计需求更改，需要从单图片上传改成单/多图片上传。刚开始我觉得这很好改，改改参数样式逻辑什么的就好了。微信使用JSSDK调用图像接口。上传分成两步：选择图片和上传图片。

选择图片

  chooseImage () {
      window.wx && window.wx.chooseImage({
        count: this.multi ? 9 : 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          uploadImage(this, res.localIds)
        }
      })
    }

选择图片成功后得到的localIds是选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
用this.multi来控制单/多图片上传，单图片上传每回只能上传一张图片，所以选择图片的时候也只能选择一张，上传的图片会替换掉之前上传的图片。
多图片上传一次可选择任意张图片上传，这里我设置最多9张，试过能设置的最大值也是9。

上传图片

const uploadImage = (vm, localIds, idx = 0) => {
  const localId = localIds[idx]
  window.wx.uploadImage({
    localId: localId,
    isShowProgressTips: 1,
    success (res) {
      vm.multi ? vm.value.push(res.serverId) : vm.value = [res.serverId]

      if (window.__wxjs_is_wkwebview) {
        getLocalImgData(vm, localId)
      } else {
        vm.multi ? vm.images.push(localId) : vm.images = [localId]
      }

      if (++idx < localIds.length) {
        window.setTimeout(() => uploadImage(vm, localIds, idx), 500)
      }
    }
  })
}

上传成功后返回图片的服务器端ID。因为微信上传图片有效期只有3天，我们项目这里是前端直接传服务器ID给后台，后台根据ID去微信端拿图片，存储到阿里云上，得到图片的地址。
单图片上传的时候，把微信开发文档的代码拿过来修修就能用了。多图片我更正了两回，才达到预期效果。

第一回开始直接for循环调用uploadImage，微信直接重启，再进入我之前上传的页面，看到只上传成功了几张，不完整。上网搜了搜，说是连续调用微信API会出问题，就改成递归的方式。
but，再次调试的时候虽然不死机，多张图片有时上传完整，有时不完整，后面看出规律，网速快的时候上传不完整。额，看来调用API还是太快，我就给每次调用成功后来个500毫秒间隔，这样总算没问题了。

IOS显示问题

const getLocalImgData = (vm, localId) => {
  window.wx.getLocalImgData({
    localId: localId,
    success: function (res) {
      vm.multi ? vm.images.push(localId) : vm.images = [res.localData]
    }
  })
}

IOS微信显示图片的时候我们需要调用getLocalImgData方法拿到图片的base64编码，用于替换localId显示图片。原因开发文档上是这样说明的。

备注：此接口仅在 iOS WKWebview 下提供，用于兼容 iOS WKWebview 不支持 localId 直接显示图片的问题。

把问题解决之后感觉好轻松！～

最后编辑于：2018.03.27 09:59:45