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对象进行上传的关键。
声明:本站所有文章和图片,如无特殊说明,均为原创发布。商业转载请联系作者获得授权,非商业转载请注明出处。