由于設(shè)計(jì)需求更改屈尼，需要從單圖片上傳改成單/多圖片上傳炊汹。剛開(kāi)始我覺(jué)得這很好改躬充，改改參數(shù)樣式邏輯什么的就好了。微信使用JSSDK調(diào)用圖像接口。上傳分成兩步： 選擇圖片和上傳圖片充甚。
選擇圖片
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標(biāo)簽的src屬性顯示圖片 - 用
this.multi來(lái)控制單/多圖片上傳，單圖片上傳每回只能上傳一張圖片伴找，所以選擇圖片的時(shí)候也只能選擇一張妙蔗，上傳的圖片會(huì)替換掉之前上傳的圖片。 - 多圖片上傳一次可選擇任意張圖片上傳疆瑰，這里我設(shè)置最多9張眉反，試過(guò)能設(shè)置的最大值也是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)
}
}
})
}
上傳成功后返回圖片的服務(wù)器端ID穆役。因?yàn)槲⑿派蟼鲌D片有效期只有3天寸五，我們項(xiàng)目這里是前端直接傳服務(wù)器ID給后臺(tái)，后臺(tái)根據(jù)ID去微信端拿圖片耿币，存儲(chǔ)到阿里云上梳杏，得到圖片的地址。
單圖片上傳的時(shí)候淹接，把微信開(kāi)發(fā)文檔的代碼拿過(guò)來(lái)修修就能用了十性。多圖片我更正了兩回，才達(dá)到預(yù)期效果塑悼。
- 第一回開(kāi)始直接for循環(huán)調(diào)用
uploadImage劲适，微信直接重啟，再進(jìn)入我之前上傳的頁(yè)面厢蒜，看到只上傳成功了幾張霞势，不完整。上網(wǎng)搜了搜斑鸦，說(shuō)是連續(xù)調(diào)用微信API會(huì)出問(wèn)題愕贡，就改成遞歸的方式。 - but巷屿，再次調(diào)試的時(shí)候雖然不死機(jī)固以，多張圖片有時(shí)上傳完整，有時(shí)不完整嘱巾，后面看出規(guī)律憨琳，網(wǎng)速快的時(shí)候上傳不完整。額浓冒，看來(lái)調(diào)用API還是太快巢掺，我就給每次調(diào)用成功后來(lái)個(gè)500毫秒間隔算途，這樣總算沒(méi)問(wèn)題了冬耿。
IOS顯示問(wèn)題
const getLocalImgData = (vm, localId) => {
window.wx.getLocalImgData({
localId: localId,
success: function (res) {
vm.multi ? vm.images.push(localId) : vm.images = [res.localData]
}
})
}
IOS微信顯示圖片的時(shí)候我們需要調(diào)用getLocalImgData方法拿到圖片的base64編碼焕济，用于替換localId顯示圖片慢味。原因開(kāi)發(fā)文檔上是這樣說(shuō)明的。
備注：此接口僅在 iOS WKWebview 下提供墅冷，用于兼容 iOS WKWebview 不支持 localId 直接顯示圖片的問(wèn)題纯路。
把問(wèn)題解決之后感覺(jué)好輕松！～
