老鬼的博客 来都来啦,那就随便看看吧~
base64转blod和file
发布于: 2018-05-23 更新于: 2023-11-08 分类于: Html 阅读次数: 

一:微信getLocalData转化blod和file

1.1 微信JS-SDK文档

1.2 获取本地图片接口

1
2
3
4
5
6
wx.getLocalImgData({
localId: '', // 图片的localID
success: function (res) {
var localData = res.localData; // localData是图片的base64数据,可以用img标签显示
}
});

1.3 转化成blod

1
2
3
4
5
6
7
8
9
//base64转blod
function dataURLtoBlob(dataurl) {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {type:mime});
}
1
2
3
4
5
6
7
8
9
//base64转file
function dataURLtoFile(dataurl, filename) {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, {type:mime});
}

其中的dataurl就是base64的数据,不过用微信的getLocalImgData要进行转化,
转化如下:

1
2
3
4
5
6
7
8
9
10
11
12
 wx.getLocalImgData({
localId: localIds[0], // 图片的localID
success: function (res) {
var localData = res.localData; // localData是图片的base64数据,可以用img标签显示
if (window.__wxjs_is_wkwebview) { // 如果是IOS,需要去掉前缀
localData = localData.replace('jgp', 'jpeg');
} else {
localData = 'data:image/jpeg;base64,' + localData;
}
var file = dataURLtoBlob(localData);
}
});
1
2
备注:微信的getLocalImgData不要使用dataURLtoFile,原因是:
部分手机使用这个方法转换出来的file是空的,暂时还未找到原因。

二:canvos的base64转bold和file

2.1 转化方法

方法同上,只不过canvos的base64不用处理,可以直接使用

dataURLtoFile和dataURLtoBlob进行转化。

1
2
备注:canvos的base64转换成file提交到后台java接收,file为空,
暂时没有找到原因

三:提交到后台

  • 建议

    使用dataURLtoBlob提交到后台,并使用formData进行数据提交。

  • ajax提交文件到后台

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var formData = new FormData();  
//使用dataURLtoBlob转化的二进制,其中第一个参数是input name="file"的属性
formData.append('file',file);
//提交的其他参数,其中第一个参数也是input name="xxx"的属性
formData.append('agentId',agentId);
formData.append('userId',userId);
$.ajax({
url:'fuse.action',
data:formData,
cache:false,
processData:false,
contentType:false,
type:'post',
dataType:'json',
success:function(json){
console.log(json);
},error:function(){
alertp('网络错误!');
}
});
*************感谢您的阅读*************