最近做了在小程序嵌入的H5页面的选择并上传图片的功能，过程中踩了很多坑，写下此文记录一下。
首先，查看小程序文档可知，web-view有以下几个图片API：
图片.png
但是！！！使用这些API首先要配置微信签名：
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来
appId: datad.appid, // 必填，公众号的唯一标识
timestamp: datad.timestamp, // 必填，生成签名的时间戳
nonceStr: datad.noncestr, // 必填，生成签名的随机串
signature: datad.signature,// 必填，签名，见附录1
jsApiList: [
"openLocation"
] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
配置好微信签名后，调用wx.ready()接口，把需要使用的wx.chooseImage()作为参数；
wx.ready(function() {
wx.chooseImage({
count: 1, // 默认9
sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ["album", "camera"],// 可以指定来源是相册还是相机，默认二者都有
success: function(res) {
// console.log(res.localIds);
},
fail: function(res) {
//
}
});
});
调用wx.chooseImage() 可以打开相册或相机选择图片，返回图片的localId，localId可以作为img 标签的src直接显示。
选择好图片并在界面上成功显示后，下一步就是上传了。
通过微信的wx.chooseImage接口获取的图片localId是以weixin://开头的，不能直接上传到我们自己的服务器。
一个办法是使用wx.uploadImage，wx.uploadImage接口是上传到微信的服务器，后端需要再通过接口下载图片到自己的服务器，上传图片有效期只有3天。
wx.uploadImage({
localId: '', // 需要上传的图片的本地ID，由chooseImage接口获得
isShowProgressTips: 1, // 默认为1，显示进度提示
success: function (res) {
var serverId = res.serverId; // 返回图片的服务器端ID
}
});
这个方法可行，但很不方便。
另一个办法就是通过把图片转换成base64，再转换成file，这样就能上传到自己的服务器了。
我采用的是后一种办法。
通过wx.getLocalImgData接口，可以获取到图片的base64数据。
这里有两个坑，在android系统调用这个接口，返回的res.localData就是base64数据，而在ios系统，返回的res.localData有一段前缀data:image/jgp;base64, ，需要去除。
convertLocalIdToBase64(id) {
return new Promise((resolve, reject) => {
wx.getLocalImgData({
localId: id,
success: res => {
if (window.navigator.userAgent.match(/iPhone|ipad|ipod|ios/i)) {
let base64 = res.localData.replace("data:image/jgp;base64,", "");
resolve(base64);
} else {
resolve(res.localData);
}
}
});
});
},
接下来就是把base64数据转换成file：
convertBase64UrlToFile(urlData) {
return new Promise((resolve, reject) => {
var bytes = atob(urlData);
var ab = bytes.length;
var ia = new Uint8Array(ab);
for (var i = 0; i < ab; i++) {
ia[i] = bytes.charCodeAt(i);
}
let file = new File([ia], "123.png", { type: "image/png" });
resolve(file);
});
},
这里也有一个坑，这段代码在ios9.3的系统中报错了。
经排查，原因是部分手机系统版本还不支持File，ios低于9.3(含)、安卓低于4.4(含)都不支持，见：caniuse
解决办法就是：将Base64转换为Blob对象，blob的兼容性相对File会更好一些。这一点参考文章
这里我尝试把base64转换成blob对象，但是上传图片时还是失败了，应该是后端不支持blob。这里如果实在要用blob，后端估计也要修改接口。
我们项目的后端嫌麻烦，所以我们最终决定，不兼容低版本的系统了。。。所以我还是用File来上传。
uploadFile(file) {
return new Promise((resolve, reject) => {
var formDataToUpload = new FormData();
formDataToUpload.append("file", file);
let url = ‘’;
axios({
method: "post",
url,
data: formDataToUpload,
dataType: "file",
processData: false,
contentType: "multipart/form-data"
})
.then(data => {
resolve(data.result);
})
.catch(err => {
reject(err);
});
});
},
上传成功！
网友评论