微信公众号开发时 实现多图上传的功能 但是实际上 安卓手机上只能义词上传一张图片(测试的机型:一加5、一加6、华为note10)代码如下:
<div data-v-2dee107c="" class="uploaderImg van-uploader">
<img data-v-2dee107c="" src="http://s.xiyuekids.com/school-sass/wechat/static/teacher/icon-teacher-photo@2x.png" alt="">
<input type="file" ref="file" @change="readImg" accept="image/*" multiple="multiple" class="van-uploader__input">
</div>
选择图片为什么不用 wx.chooseImage 要用input
因为要实现超过9张的图片上传呀
最后妥协了 用的微信的api 一次选9张
请问wx.chooseImage在H5页面中怎么用??有详细点demo借鉴一下
const actions = {
/**
* 初始化微信配置
* @param {*} param0
* @param [] perms微信权限
*/
init ({commit, state}, perms) {
return new Promise((resolve, reject) => {
commit('resetRady', false) // 重置是否ready的标识
// let data = {
// url: state.url,
// perms: perms,
// dev_app_id: 'wxdd7ce699168523d7'
// }
let data = {
url: state.url,
perms: 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('errMsg', err)
})
}).catch(err => {
Utils.showErrorMsg(err)
reject(err)
})
})
},
ready ({commit, state}, payload) {
return new Promise((resolve, reject) => {
if (payload.isShare === false) {
wx.ready(() => {
wx.hideAllNonBaseMenuItem()
// 改变能否上传图片的标识
if (payload.uploadImg) {
commit('resetUploadImg', true)
}
resolve()
})
} else {
let parsedLink = payload.shareInfo.link === undefined || !payload.shareInfo.link ? window.location.href : payload.shareInfo.link
let share = {
title: payload.shareInfo.title,
// link: parsedLink,
link: Utils.filterUrl(parsedLink, ['code', 'state', '_']),
desc: payload.shareInfo.desc,
type: payload.shareInfo.type === null ? 'link' : payload.shareInfo.type,
imgUrl: payload.shareInfo.img === undefined || !payload.shareInfo.img ? null : Filters.handleResourcePrefix(payload.shareInfo.img, 'special'),
success: resolve,
cancel: reject
}
if (!state.isReady) {
methods: {
handleChooseImage () {
this.imgInfo = this.currentImg
this.localIdLen = this.currentImg.length
let count = this.maxCount - this.currentImg.length
if (count === 0) {
return this.$utils.showMessage(`亲,最多只能上传${this.maxCount}张图片哦~`)
} else if (count < this.count) {
this.count = count
}
if (this.isLoading) {
return
}
this.isLoading = true
if (this.isIos) {
let timer = setTimeout(() => {
this.fetChooseImage()
clearTimeout(timer)
}, 350)
} else {
this.fetChooseImage()
}
},
fetChooseImage () {
this.$store.dispatch('Wechat/chooseImage', {count: this.count}).then(res => {
this.isLoading = false
let localIds = res.localIds
if (localIds.length > 0) {
this.localIdArr = localIds
this.localIdLen += localIds.length
// 作用: 当父组件接收到得数据长度和localId得长度一样时才能显示点击上传的按钮,否则是在上传中不显示上传的按钮
this.$emit('watchLocalIdLen', this.localIdLen)
this.handleUploadImage()
}
}).catch(err => {
this.isLoading = false
if (err.errMsg !== 'chooseImage:cancel') {
this.$utils.showErrorMsg('chooseImage:' + JSON.stringify(err))
}
})
}
}
methods: {
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.handleImgInfo(serverId)
this.handleUploadImage()
}).catch(err => {
this.$utils.showErrorMsg('uploadImage:' + JSON.stringify(err))
})
},
handleImgInfo (serverId) {
let obj = {
// 读取成功的数据
readData: '//s.ijia1.com/ym/icon/default_loading@2x.png',
serverId: serverId,
// 上传成功的状态 true代表成功,false代表还在上传,null代表错误
isSuccess: false,
// 是否显示蒙层
isShow: true
}
this.imgInfo.push(obj)
this.fetchUploadImgQueue(serverId)
if (this.localIdLen === this.imgInfo.length) {
this.$emit('onSelect', this.imgInfo)
}
},
// 上传图片到qiniu
fetchUploadImgQueue (serverId) {
this.$http.post('v1/common/upload/img/queue', {
task_id: this.taskId,
media_id: serverId
}).then(() => {
}).catch(err => {
this.$utils.showErrorMsg(err)
})
}
}
微信页面 用原生也解决不了 多图选择上传的问题吗 我本来打算实在不行就用原生嘞
用 wx.chooseImage上传解决了多图上传的问题 用原生js还是不行