小程序內(nèi)嵌h5上傳圖片就是個(gè)坑,折磨的我都沒脾氣了杯道,原生的input不能用虫几,必須用它的jsskd,且
step 1 調(diào)用wxChooseImage選擇圖片
step 2 調(diào)用wxUploadImage上傳圖片至微信服務(wù)器
step 3 后臺調(diào)用“微信獲取臨時(shí)素材”下載圖片到本地服務(wù)器
step 4 返回本地服務(wù)器地址到前端
wxChooseImage可以選擇多張照片第股,wxUploadImage卻只能單張上傳,且不支持并發(fā)(一張傳完再傳下張)话原。最先想到的就是使用Generator寫個(gè)無并發(fā)的遞歸
先寫個(gè)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
處理并發(fā)
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) {
// 循環(huán)上傳多個(gè)localid(同步)
gfunc.next(wxLids[i]).value.then(res => {
success(res)
i++
handleResult(success, fail)
}, fail)
}
return handleResult
}
function* myGfuncUpload(wxLid) {
// 上傳至微信服務(wù)器
wxLid = yield (item => new Promise((resolve, reject) => {
if (item) {
wx.uploadImage({
localId: item, // 需要上傳的圖片的本地ID夕吻,由chooseImage接口獲得
isShowProgressTips: 1, // 默認(rèn)為1诲锹,顯示進(jìn)度提示
success: (res) => {
if (res.errMsg == "uploadImage:ok") {
resolve({wxSid: res.serverId, wxLid: item})
} else
reject ({err: res.errMsg, wxLid: item})
}})
}
}))(wxLid)
// 等待下次上傳
yield* myGfuncUpload(wxLid)
}
調(diào)用
doHzfWxCheck() // 微信授權(quán)
.then(() => wxChooseImage()) // 也封裝成了Promise
.then(wxLids => wxUploadImage(wxLids))
.then(e => e(({wxSid, wxLid}) => {
// 會被多次調(diào)用,把wxSid發(fā)請求給后臺涉馅,等著接收自己的服務(wù)器圖片路徑
console.info('上傳成功归园,serverId: ', wxSid)
}, ({err, wxLid}) => {
console.info('上傳失敗,原因: ', err)
}))
8.3追加
小程序web-view在ios中稚矿,所經(jīng)過的頁面都要授權(quán)蔓倍,最終頁面才會授權(quán)成功
小程序web-view安卓中,第一個(gè)頁面就是授權(quán)頁面盐捷,必須刷新一次頁面才能授權(quán)成功(直接授權(quán)兩次不管用)
惡心呀,惡心呀默勾,坑啊碉渡,再也不要在小程序里內(nèi)嵌復(fù)雜的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