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

真诚赞赏,手留余香
赞赏
随机推荐
CentOS 8 安装 Apache 和 PHP
Nodejs base64编码与解码
依赖注入(DI)和控制反转(Ioc)
重写了自己的 Node.js 爬虫
Git忽略规则.gitignore梳理
跨域简单请求变成非简单请求导致的Bug
Wordpress 学习笔记 2 插件编写
php判断数组中是否存在指定键(key)的两种方法
色女手绘 2019.03.03 2.5小时练习
Git 工作流程
QQ号

微信联系我

夜间模式切换
回到顶部