最近遇到一个需求。需要用户在手机段选择图片然后上传。我们客户端都是微信浏览器打开的，所以使用了微信jssdk提供的选择图片非常的方便就可以选择图片。而且还很好用。但是我们想要将微信选择的图片转换为文件的方式上传上来。或者直接将文件上传到阿里云oss里面去。 所以就踩了很多微信选择图片转文件类型的坑
直接上代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
/**
* 符合微信的dataURL转文件类型
* @param dataURI
* @param filename 文件名
* @returns File
* @author zhangrongdong <admin@zrongdong.com>
*/
function dataURLtoFile(dataURI, filename) {
let byteString, mimeString;
// 查找字符串是否存在
if (dataURI.indexOf(',') >= 0) {
byteString = atob(dataURI.split(',')[1]);
mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
} else {
byteString = atob(dataURI);
mimeString = 'image/png';
}
let n = byteString.length;
let u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = byteString.charCodeAt(n);
}
return new File([u8arr], filename, {type: mimeString});
}
/**
* 符合微信的dataURI转blob类型
* @param dataURI
* @returns {Blob}
* @author zhangrongdong <admin@zrongdong.com>
*/
function dataURItoBlob(dataURI) {
let byteString, mimeString;
// 查找字符串是否存在
if (dataURI.indexOf(',') >= 0) {
byteString = atob(dataURI.split(',')[1]);
mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
} else {
byteString = atob(dataURI);
mimeString = 'image/png';
}
// write the bytes of the string to an ArrayBuffer
let ab = new ArrayBuffer(byteString.length);
let ia = new Uint8Array(ab);
for (let i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ab], {type: mimeString});
}
调用示例和说明
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
wx.getLocalImgData({
localId: wxImageId, //需要上传的图片的本地ID，由chooseImage接口获得
success: function (res) {
let localData = res.localData;
let imageBase64 = '';
if (localData.indexOf('data:image') >= 0) {
// 苹果手机获取到的图片是jgp的 这里我不做处理了。
// if(localData.indexOf('image/jgp') >= 0){
// localData = localData.replace('image/jgp', 'image/jpg');
// }
//苹果默认生成'data:image/jgp;base64,'的头部
imageBase64 = localData.split(',')[1];
} else {
// 安卓手机的需要全局替换一下
imageBase64 = localData.replace(/\n/g, '');
}
let fileImage = dataURLtoFile(imageBase64 , 'test.jpg');
// 然后接下来你就把你的图片拿去用或者上传
},
fail: function (res) {
alert(JSON.stringify(res));
}
});
