base64格式图片转换为FormData对象进行上传

var base64String = /*base64图片串*/;

//这里对base64串进行操作,去掉url头,并转换为byte
var bytes = window.atob(base64String.split(',')[1]);//处理异常,将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');


第二种:

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对象

 

这里说一下关于这个ArrayBuffer:ArrayBuffer 对象用来表示通用的、固定长度的原始二进制数据缓冲区。ArrayBuffer 不能直接操作,而是要通过类型数组对象或 DataView 对象来操作,它们会将缓冲区中的数据表示为特定的格式,并通过这些格式来读写缓冲区的内容(来源于MDN)。这里的类型数组对象有:Int8Array、Uint8Array、Int16Array、Uint16Array、Int32Array、Uint32Array、Float32Array、Float64Array 

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/DataView

那么这里就不难理解了,ArrayBuffer不能通过索引来操作自身,只能通过类型数组对象或者DataView来操作,所以这里的ia[i] = types.charCodeAt(i)就是对ArrayBuffer进行的操作,所以在 new Blob对象的时候,ab和ia是相等的了。
以上就是base64图片通过ArrayBuffer和Blob对象转换为FormData对象进行上传的关键。


来源:https://www.cnblogs.com/xuejiangjun/p/8194985.html

修改时间 2019-01-13

真诚赞赏,手留余香
赞赏
随机推荐
2018.1.26 Night King
动画--过渡函数 transition-timing-function
Base64
Nginx 报错 nginx accept() failed (24: Too many open files)
apache和php5.4无法开启curl
Fetch API
npm国内镜象设置的三种方法
Hls.js 播放 m3u8
CentOS 8 源 yum/dnf 源添加、删除和优化
gps纠偏数据库及gps纠偏算法PHP