首先要注意.jsApiList的配置
config.jsApiList = [
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'onMenuShareQZone',
'scanQRCode',
'chooseImage',
'uploadImage'
];
'chooseImage','uploadImage'为必填字段
还有就是发现一个问题iphone下直接for循环去请求会造成页面卡死,无奈只能递归。。。
以下项目是vue构建的贴代码
// 调用微信图片选择
export function addImage(vm) {
if (!wxReady) {
vm.$store.commit('popSet', {tips: '微信暂时未准备好,请稍后再试', status: 1, time: 1500});
return;
}
wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
let localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
vm.$store.state.photoLocalIds.push(localIds[0]);
// 兼容新的ios设备转base64预览
if (window.__wxjs_is_wkwebview) {
getLocalData(localIds[0]);
} else {
vm.$store.state.photoAddImg.push(localIds[0]);
}
},
fail: function(res) {
console.log('scan fall', res);
alert(res.errMsg);
}
});
function getLocalData (localIds) {
wx.getLocalImgData({
localId: localIds, // 图片的localID
success: function (res) {
let imgData = res.localData; // localData是图片的base64数据,可以用img标签显示
vm.$store.state.photoAddImg.push(imgData);
},
fail: function(res) {
console.log('scan fall', res);
alert(res.errMsg);
}
});
}
};
// 调用微信图片上传到微信服务器
export function uploadImage (vm) {
let data = vm.$store.state.photoLocalIds,
seaverImgIds = [],
n = 0;
if (data.length === 0){
vm.$store.commit('popSet', {tips: '请选择图片', status: 1, time: 1500});
return;
}
vm.$store.commit('opacityMaskOn');
upload(vm);
function upload (vm){
wx.uploadImage({
localId: data[n], // 需要上传的图片的本地ID,由chooseImage接口获得
isShowProgressTips: 0, // 默认为1,显示进度提示
success: function (res) {
seaverImgIds.push(res.serverId); // 返回图片的服务器端ID
n += 1;
// 递归多图上传
if (n < data.length) {
upload(vm);
}
if (n === data.length) {
alert(seaverImgIds)
vm.$store.commit('opacityMaskOff');
}
}
});
};
};
引用
<template>
<div>
<buttom @click="CaddImage">点击选择照片</buttom>
<ul>
<li v-for="item in imgList">
<img :src="item">
</li>
</ul>
<span @click="upload">提交上传</span>
</div>
</template>
<script>
import {addImage, uploadImage} from 'common/js/qrCodeScan.js';
export default {
data () {
return {
imgList: []
};
},
methods: {
CaddImage () {
addImage(this);
},
upload () {
uploadImage(this);
}
},
created () {
this.imgList = this.$store.state.photoAddImg;
}
};
</script>
最后收尾n===data.length时既表示图片已经全部上传到微信的服务器 只需要将serverId传给后台让他们按照id去取即可,