问题：微信多图上传 ios手机上偶尔出现报错chooseImage:the permission value is offline verifying（上传流程wx.chooseImage、给后台serverId用wx.uploadImage、本地展示用wx.getLocalImgData）
image.png
问题分析： 开启debug测试得出，先报错chooseImage:the permission value is offline verifying，在弹出config：ok
得出结论：导致错误的原因是"先执行了wx.chooseImage方法再执行wx.config(有请求异步导致)"。正常的情况是先弹出config，再调用wx.chooseImage方法
解决方法：
1、 setTimeout(() => { }, 400) // 延迟一下
2、放在wx.ready里面 确保wx.config执行完成触发
实现代码
Publish.vue
html
<!--图片展示-->
<div class="form-img-container" v-if="arr.length > 0">
<!-- 微信上传图片 -->
<wechat-uploader-img v-if="data" @addImg="addImg" @success="success(index)" @error="error(index)" :is-publish="true" @showImgDetail="showImgDetail(index, data)"
v-for="(data,index) in arr" :key="index" :index="index" :info="data" :mold="'bulletin'"/>
</div>
<!--上传按钮-->
<template>
<div class="uploaderImg" @click="handleChooseImage()">
<div class="add-img-icon"></div>
<div class="add-img-text">图片{{ arr.length }}/3张</div>
</div>
</template>
js
// 微信上传
import WechatUploaderImg from '@/components/WechatUploaderImg'
export default {
data () {
return {
form: {
images: [] // 上传到服务器的相册
},
isLoading: false,
// 暂存读取后数据
arr: [],
// 是否显示提示框
showDialog: false,
// 是否是ios手机
isIos: this.$utils.isIOS()
}
},
components: {
WechatUploaderImg
},
methods: {
// 图片上传（微信的js-dk）
handleChooseImage () {
if (this.isLoading) {
return
}
this.isLoading = true
let arr = []
for (let i = 0; i < this.arr.length; i++) {
if (this.arr[i]) {
arr.push(this.arr[i])
}
}
// 实际可用长度
let arrLen = arr.length
if (arrLen >= 3) {
this.isLoading = false
this.$utils.showMessage('亲，最多只能上传3张图片哦~')
} else {
if (this.isIos) {
setTimeout(() => { // 解决问题的重要代码（定时器延时）
this.fetChooseImage(arrLen)
}, 400)
} else {
this.fetChooseImage(arrLen)
}
}
},
fetChooseImage (arrLen) {
// eslint-disable-next-line
wx.ready(() => { // 解决问题的重要代码（方wx.ready里面）
this.$store.dispatch('Wechat/chooseImage', 3).then(res => {
this.isLoading = false
let localIds = res.localIds
if (localIds.length > 0 && 3 - arrLen >= localIds.length) {
this.localIdArr = localIds
} else if (localIds.length > 0 && 3 - arrLen < localIds.length) {
this.localIdArr = localIds.slice(0, 3 - arrLen)
}
this.handleUploadImage()
}).catch(err => {
this.isLoading = false
if (err.errMsg !== 'chooseImage:cancel') {
this.$utils.showErrorMsg('chooseImage:' + JSON.stringify(err))
}
})
})
},
handleUploadImage () {
if (!this.localIdArr.length) {
return
}
let localId = this.localIdArr.shift()
this.$store.dispatch('Wechat/uploadImage', localId).then(res => {
let serverId = res.serverId // 返回图片的服务器端ID
this.handleGetLocalImgData(localId, serverId)
this.handleUploadImage()
}).catch(err => {
this.$utils.showErrorMsg(err)
})
},
handleGetLocalImgData (localId, serverId) {
this.$store.dispatch('Wechat/getLocalImgData', localId).then(res => {
let localData = res.localData
let obj = {
// 读取成功的数据
readData: localData,
serverId: serverId,
// 上传成功的状态 true代表成功，false代表还在上传，null代表错误
isSuccess: false,
// 是否显示蒙层
isShow: true
}
this.arr.push(obj)
}).catch(err => {
this.$utils.showErrorMsg(err)
})
},
// 数据库添加图片
addImg (src, index) {
if (index !== undefined && this.form.images.length > index) {
this.form.images.splice(index, 1, {url: src})
}
if (index !== undefined && this.form.images.length <= index) {
this.form.images[index] = {url: src}
}
},
// 删除图片
deleteImg () {
this.arr.splice(this.imgDetailIndex, 1)
this.form.images.splice(this.imgDetailIndex, 1)
this.isShowImgDetail = false
},
// 上传成功的状态
success (index) {
this.arr[index].isShow = false
this.arr[index].isSuccess = true
},
// 上传失败的提示
error (index) {
this.arr[index].isSuccess = null
}
},
watch: {
arr (newVal) {
let length = newVal.length
if (length === 0) {
this.$refs.formInside.style.minHeight = '7.1rem'
this.$refs.formMid.style.minHeight = '5.4rem'
} else if (length > 0) {
let trueLength = 0
newVal.forEach(item => {
if (item) {
trueLength++
}
})
if (trueLength > 0) {
this.$refs.formInside.style.minHeight = 'unset'
this.$refs.formMid.style.minHeight = '2.172rem'
} else {
this.$refs.formInside.style.minHeight = '7.1rem'
this.$refs.formMid.style.minHeight = '5.4rem'
}
}
}
}
}
components/WechatUploaderImg
html
<template v-if="mold == 'bulletin'">
<div @click.prevent.stop="showImgDetail" v-if="info.readData" class="form-img">
<!-- 公告预览 有http开头的图片 先判断http的图片再判断机型 -->
<img v-if="info.readData.indexOf('http') === 0" :src="info.readData" alt="">
<img v-else-if="isIos" :src="info.readData" alt="">
<img v-else :src="'data:image/gif;base64,' + info.readData" alt="">
<transition name="fade">
<div v-if="info.isShow" :id="index" class="img_circle"></div>
</transition>
</div>
</template>
js
export default {
created () {
// 当url是http时不用上传
if (this.info.readData && this.info.readData.indexOf('http') !== 0) {
this.fetchImages()
}
},
props: {
info: {
type: Object
},
index: {
type: Number
},
mold: {
type: String
}
},
data () {
return {
loading: {
rate: 0
},
// 是否是ios手机
isIos: this.$utils.isIOS()
}
},
methods: {
// 图片上传到七牛
fetchImages () {
this.$http.post(`v1/common/upload/img`, {
img_content: this.info.serverId,
type: 1
}).then(res => {
let src = res.data.meta.img_url
this.$emit('addImg', src, this.index)
this.success()
}).catch(err => {
this.$utils.showErrorMsg(err)
this.error()
})
},
// 上传失败
error () {
this.$emit('error', this.index)
this.$utils.showErrorMsg('图片上传有误，请重新上传')
},
// 上传成功
success () {
this.$emit('success', this.index)
},
// 删除
splice () {
this.$emit('splice', this.index)
},
// 点击预览
showImgDetail () {
this.$emit('showImgDetail', this.index)
}
},
watch: {
info (val) {
// 微信上传
if (this.mold === 'avatar' && this.info.readData && this.info.readData.indexOf('http') !== 0) {
this.fetchImages()
}
}
}
}
Wechat.js
import Http from '@/libs/Http'
import Utils from '@/libs/Utils'
const state = {
url: ''
}
const mutations = {
/**
* 设置校验url
* @param {Object} state 状态
*/
setUrl (state) {
let currentUrl = document.URL
if (Utils.isIOS()) {
let landingUrl = sessionStorage.getItem('ios_landing_url')
if (landingUrl) {
state.url = landingUrl
} else {
state.url = currentUrl
}
} else {
state.url = currentUrl
}
}
}
const actions = {
/**
* 初始化微信配置
* @param {*} param0
* @param {*} payload payload.perms微信权限
*/
initConfig ({commit, state}, payload) {
return new Promise((resolve, reject) => {
let data = {
url: state.url,
perms: payload.perms
}
Http.post('/v1/wechat/js', data).then(response => {
let wechatJs = response.data.meta.wechat_js
// wechatJs.debug = true
/* eslint-disable no-undef */
wx.config(wechatJs)
resolve()
wx.error(err => {
console.log('wx.err', err)
})
}).catch(err => {
Utils.showError(err)
reject(err)
})
})
},
/**
* 分享操作
* @param {Object} param0
* @param {Object} payload {title:'',link:null,desc:null,type:null,img:''}
*/
share ({dispatch, state}, payload) {
return new Promise((resolve, reject) => {
dispatch('initConfig', {perms: ['onMenuShareTimeline', 'onMenuShareAppMessage']}).then(() => {
// dispatch('initConfig', {perms: ['updateAppMessageShareData', 'updateTimelineShareData']}).then(() => {
let parsedLink = payload.link === undefined || !payload.link ? window.location.href : payload.link
/* eslint-disable no-undef */
wx.ready(() => { // 因为是页面加载时就需要调用相关接口所以要加wx.ready方法
let share = {
title: payload.title,
link: parsedLink,
desc: payload.desc,
type: payload.type === null ? 'link' : payload.type,
imgUrl: payload.img === undefined || !payload.img ? null : payload.img,
success: resolve,
cancel: reject
}
wx.onMenuShareTimeline(share)
wx.onMenuShareAppMessage(share)
// wx.updateAppMessageShareData(share)
// wx.updateTimelineShareData(share)
})
})
})
},
/**
* 关闭分享操作
*/
unShare ({dispatch, state}, payload) {
return new Promise((resolve, reject) => {
if (payload === 'both') {
dispatch('initConfig', {perms: ['chooseImage', 'getLocalImgData', 'uploadImage', 'hideAllNonBaseMenuItem']}).then(() => {
/* eslint-disable no-undef */
wx.ready(() => { // 因为是页面加载时就需要调用相关接口所以要加wx.ready方法
wx.hideAllNonBaseMenuItem()
})
})
} else {
dispatch('initConfig', {perms: ['hideAllNonBaseMenuItem']}).then(() => {
/* eslint-disable no-undef */
wx.ready(() => { // 因为是页面加载时就需要调用相关接口所以要加wx.ready方法
wx.hideAllNonBaseMenuItem()
})
})
}
})
},
/**
* 从相册中选图片或者拍照
*/
chooseImage ({dispatch, state}, payload) {
return new Promise((resolve, reject) => {
// 因为是用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中
wx.chooseImage({
count: payload, // 默认9张照片
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: resolve,
fail: reject,
complete: reject
})
})
},
/**
* 获取本地图片
*/
getLocalImgData ({dispatch, state}, payload) {
return new Promise((resolve, reject) => {
// 因为是用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中
wx.getLocalImgData({
localId: payload, // 图片的localID
success: resolve,
fail: reject
})
})
},
/**
* 上传图片接口
*/
uploadImage ({ dispatch, state }, payload) {
return new Promise((resolve, reject) => {
wx.uploadImage({
localId: payload, // 需要上传的图片的本地ID，由chooseImage接口获得
isShowProgressTips: 0, // 默认为1，显示进度提示
success: resolve,
fail: reject
})
})
}
}
export default {
namespaced: true,
state,
mutations,
actions
}
网友评论