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对象进行上传的关键。


声明:本站所有文章和图片,如无特殊说明,均为原创发布。商业转载请联系作者获得授权,非商业转载请注明出处。
随机推荐
Node.js path 模块
JavaScript 私有方法和私有属性
如何使主题支持 Woocommerce
macOS 使用 crontab 定时任务
WordPress 函数 get_categories() 获取所有分类
WordPress 输入安全
Node.js 实现 RBAC 权限模型
Page Visibility API