小程序内嵌h5上传图片(使用Generator)

小程序内嵌h5上传图片就是个坑,折磨的我都没脾气了,原生的input不能用,必须用它的jsskd,且
step 1 调用wxChooseImage选择图片
step 2 调用wxUploadImage上传图片至微信服务器
step 3 后台调用“微信获取临时素材”下载图片到本地服务器
step 4 返回本地服务器地址到前端
wxChooseImage可以选择多张照片,wxUploadImage却只能单张上传,且不支持并发(一张传完再传下张)。最先想到的就是使用Generator写个无并发的递归
先写个dome试试

function* gfunc (n) {  
  if (n < 10) yield n
  else return 0
  yield* gfunc(n+1)
}
var ddd = gfunc(7)
ddd.next()  // 7 
ddd.next() // 8 
ddd.next() // 9

加入异步

function* gfunc (n) {
  n = yield (n => new Promise((resolve, reject) => {
      if (n) { // 过滤第一次next
        setTimeout(() => {
          resolve(n)
        }, 1000)
      }
    }))(n) 
  yield* gfunc(n)
}
var ddd = gfunc()
ddd.next()

ddd.next(7).value.then(n => console.info(n))  // 7
ddd.next(8).value.then(n => console.info(n))  // 8

处理并发

ddd.next(10).value.then(n => {
  console.info(n)
  ddd.next(11).value.then(n => {
    console.info(n)
    ...
  }}
})

正式代码

// 封装的同步多文件上传
function wxUploadImage(wxLids) {
  var gfunc = myGfuncUpload()
  gfunc.next()
  let i = 0 
  function handleResult (success, fail) {
    // 循环上传多个localid(同步)
    gfunc.next(wxLids[i]).value.then(res => { 
      success(res) 
      i++
      handleResult(success, fail)
    }, fail)
  }
  return handleResult
} 
function* myGfuncUpload(wxLid) {
  // 上传至微信服务器
  wxLid = yield (item => new Promise((resolve, reject) => {
    if (item) {
      wx.uploadImage({
      localId: item, // 需要上传的图片的本地ID,由chooseImage接口获得
      isShowProgressTips: 1, // 默认为1,显示进度提示
      success: (res) => {
        if (res.errMsg == "uploadImage:ok") {
          resolve({wxSid: res.serverId, wxLid: item})
        } else
          reject ({err: res.errMsg, wxLid: item})
      }})
    }
  }))(wxLid)
  // 等待下次上传
  yield* myGfuncUpload(wxLid)
} 

调用

doHzfWxCheck()  // 微信授权
.then(() => wxChooseImage())  // 也封装成了Promise
.then(wxLids => wxUploadImage(wxLids))
.then(e => e(({wxSid, wxLid}) => { 
    // 会被多次调用,把wxSid发请求给后台,等着接收自己的服务器图片路径
    console.info('上传成功,serverId: ', wxSid)
  }, ({err, wxLid}) => { 
    console.info('上传失败,原因: ', err)
})) 

8.3追加
小程序web-view在ios中,所经过的页面都要授权,最终页面才会授权成功
小程序web-view安卓中,第一个页面就是授权页面,必须刷新一次页面才能授权成功(直接授权两次不管用)
恶心呀,恶心呀,坑啊,再也不要在小程序里内嵌复杂的h5了,用mpvue也好,原生也好,再也不这么干了ToT
.

微信jsskd api:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
后台下载微信上传的图片:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1444738727

你可能感兴趣的:(小程序内嵌h5上传图片(使用Generator))