base64格式图片转换为FormData对象进行上传
2022-09-28 16:36 狼人:-) 阅读(438) 评论(0) 编辑 收藏 举报原理:利用ArrayBuffer、Blob和FormData
var base64String = /*base64图片串*/;
//这里对base64串进行操作,去掉url头,并转换为byte
var bytes = window.atob(base64String.split(',')[1]);
- 1
- 2
- 3
- 4
//处理异常,将ASCII码小于0的转换为大于0,这里有两种写法
第一种:
var ab = new ArrayBuffer(bytes.length);
var ia = new Uint8Array(ab);
for(var i = 0; i < bytes.length; i++){
ia[i] = bytes.charCodeAt(i); //这里有点疑惑,ia是怎么改变ab的?注:①
}
//Blob对象
var blob = new Blob([ab], {type: 'image/jpeg'}); //type为图片的格式
//FormData对象
var fd = new FormData();
//TDOD Ajax或者其他方式上传FormData对象
//FormData对象接受三个参数,第三个参数为文件名,通常我们只传前两个参数,第三个参数不传则使用默认文件名,这里使用的Blob对象,所以需要一个文件名,用时间戳代替。
fd.append('file',blob, Date.now() + '.jpg');
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
第二种:
var array = [];
for(var i = 0; i < bytes.length; i++){
array.push(bytes.charCodeAt(i));
}
var blob = new Blob([new Uint8Array(array)], {type: 'image/jpeg'});
var fd = new FormData();
fd.append('file',blob, Date.now() + '.jpg');
//TDOD Ajax或者其他方式上传FormData对象
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
注:①这里说一下关于这个ArrayBuffer:ArrayBuffer 对象用来表示通用的、固定长度的原始二进制数据缓冲区。ArrayBuffer 不能直接操作,而是要通过类型数组对象或 DataView 对象来操作,它们会将缓冲区中的数据表示为特定的格式,并通过这些格式来读写缓冲区的内容(来源于MDN)。这里的类型数组对象有:Int8Array、Uint8Array、Int16Array、Uint16Array、Int32Array、Uint32Array、Float32Array、Float64Array 附图:
DataView:
MDN链接
那么这里就不难理解了,ArrayBuffer不能通过索引来操作自身,只能通过类型数组对象或者DataView来操作,所以这里的ia[i] = types.charCodeAt(i)就是对ArrayBuffer进行的操作,所以在 new Blob对象的时候,ab和ia是相等的了。
以上就是base64图片通过ArrayBuffer和Blob对象转换为FormData对象进行上传的关键。
原文链接https://www.cnblogs.com/xuejiangjun/p/8194985.html
声明:此博有部分内容为转载,版权归原作者所有~