Vue调用微信JSSDK上传图片(wx.uploadImage)
H5页面调用微信API上传图片由于原生input上传图片无法在选择图片时控制选择的张数,所以选择调用微信JSSDK提供的方法调用相册选择图片进行上传。选择图片后上传到微信服务器,然后通知后台去微信服务器下载到本地服务器。因为需要又要限制选择图片的大小,直接上代码。首选要通过微信公众号appid等参数配置使用微信API权限。//选择图片方法chooseImage(){return new Promi
Vue页面调用微信API上传图片
由于原生input上传图片无法在选择图片时控制选择的张数,所以选择调用微信JSSDK提供的方法调用相册选择图片进行上传。选择图片后上传到微信服务器,然后通知后台去微信服务器下载到本地服务器。因为需要又要限制选择图片的大小,直接上代码。首选要通过微信公众号appid等参数配置使用微信API权限。
//选择图片方法
chooseImage(){
return new Promise((resolve, reject)=>{
let chooseCount = 9;//最大只能设置为9
wx.chooseImage({
count: chooseCount, // 默认9
sizeType: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album','camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
let localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
_this.localIds = res.localIds;
let localIdsLen = localIds.length;
//以下通过localId获取对应的base64,通过计算获取图片大小
let i = 0;
function getLocalImgDataWX() {
wx.getLocalImgData({
localId:localIds[i],
success:function(response){
let localData = response.localData;
if (localData.indexOf('data:image') != 0) {
//判断是否有这样的头部
localData = 'data:image/jpeg;base64,' + localData
}
//第一个替换的是换行符,第二个替换的是图片类型,因为在IOS机上测试时看到它的图片类型时jgp,
//这不知道时什么格式的图片,为了兼容其他设备就把它转为jpeg
localData = localData.replace(/\r|\n/g, '').replace('data:image/jgp', 'data:image/jpeg');
let itemSize = _this.getImgByteSize(localData);//获取base64大小
_this.imgSize.push(itemSize);
i++;
if(i < localIdsLen){
getLocalImgDataWX();
} else {
resolve("结束了");
}
},
fail: function (res) {
_this.$vux.toast.show({
type: "text",
width: '20em',
text: JSON.stringify(res)
});
resolve("getLocalImgDataFail");
}
});
}
getLocalImgDataWX();
},
fail: function (res) {
_this.$vux.toast.show({
type: "text",
width: '20em',
text: JSON.stringify(res)
});
resolve("chooseImageFail");
}
});
})
}
//选择图片并判断大小
async chooseImageBox(){
let n = await this.chooseImage();
if(n.indexOf("Fail") !== -1){
this.$vux.toast.show({
type: "text",
width: '12em',
text: '图片选择报错,请稍后重试!'
});
return;
}
for(var j = 0 ; j < this.imgSize.length ; j++){
if(this.imgSize[j]<100000){
this.$vux.toast.show({
type: "text",
width: '12em',
text: '图片大小必须在100k以上'
});
this.imgSize = [];
return
}
if(this.imgSize[j]>=5120000){
this.$vux.toast.show({
type: "text",
width: '12em',
text: '图片大小必须在5M以下'
});
this.imgSize = [];
return
}
}
if(this.imgSize.length>0){
//上传到微信服务器
await this.uploadImageWX(this.localIds);
this.imgSize = [];
}
}
//获取base64大小
getImgByteSize(data) {
let size = 0
if (data) { // 获取base64图片byte大小
const equalIndex = data.indexOf('='); // 获取=号下标
if (equalIndex > 0) {
const str = data.substring(0, equalIndex); // 去除=号
const strLength = str.length;
const fileLength = strLength - (strLength / 8) * 2; // 真实的图片byte大小
size = Math.floor(fileLength); // 向下取整
} else {
const strLength = data.length;
const fileLength = strLength - (strLength / 8) * 2;
size = Math.floor(fileLength); // 向下取整
}
}
return (size * 1.657)
},
在开发到真机测试的过程中也是遇到了很多问题:
1、计算后的图片大小和真实的图片大小不一致,判断并不准确,不知道是wx.getLocalImgData返回的base64不准确还是通过base64计算图片大小的方法和真实图片大小有很大的误差(目前还未找到答案)。最后通过大量的测试,粗略的估算出真实的图片大小和计算出的图片大小比例在1.657左右。
2、后端在去微信服务器下载图片的过程中,有时图片下载完会解析失败(javax.net.ssl.SSLException: SSL peer shut down incorrectly)目前发现当图片太大时就会解析失败,所以在选择图片的时候默认选择的是压缩图。
3、通过wx.getLocalImgData获取的base64有时会缺失一部分,当做url显示的时候显示不全,怀疑这也是导致后台解析图片失败的原因。
以上三个大问题并没有找到合理的答案和解释,希望有人帮忙解答一下。
上面的方法可能不是最好的方法,而且很麻烦,仅仅是记录一下在开发过程中遇到的问题。
更多推荐
所有评论(0)