鉴于个人认为网上各种文章对于二进制处理讲的过于啰嗦，做一下总结，看不懂的再去参考其它文章
javascript 以前不支持处理二进制的，不知何时(自已去查)开始支持了，涉及的对象有以下几个：
1. Blob: 二进制数据类型的一个封装
2. File: 继承自Blob，多了一个属性, input file 对象的 files 属性的上传文件就是一个File对象
3. FileReader: 用于读取 Blob 对象(还有没有其它功能，还没用过)，通过 read 相关的方法 和 onload 事件异步读取一个Blob对象
4. Int8Array, Uint8Array, Int16Array, Int32Array 等二进制数组
5. ArrayBuffer: 一种内存文件形式，属于Blob中数据存储成员类型，继承了 Int8Array, Uint8Array, Int16Array, Int32Array
6. DataView: 用来读取 ArrayBuffer
下面是我用于文件上传时转base64的一个demo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script language="javascript" type="text/javascript"> // <![CDATA[ function toBase64(arrayBuffer) { var binary = ''; var bytes = new Uint8Array(arrayBuffer); var len = bytes.byteLength; for (var i = 0; i < len; i++) { binary += String.fromCharCode(bytes[i]); } return window.btoa(binary); } function Button1_onclick() { var file = File1.files[0]; var reader = new FileReader(); reader.readAsArrayBuffer(file); reader.onload = function (p) { if (p.target.readyState == FileReader.DONE) { var dataView = new DataView(p.target.result); var count = dataView.byteLength; var byteData = dataView.getUint8(0); //读取第一个字节 var bytes = new Uint8Array(p.target.result); //直接将结果转换成一个字节数组 var base64 = toBase64(p.target.result); console.log(base64); } }; reader.onerror = function () { console.log('读取失败'); console.log(reader.error); } } // ]]> </script> </head> <body> <input id="File1" type="file" /> <input id="Button1" type="button" value="button" onclick="return Button1_onclick()" /> </body> </html>
/文件上传提交部分代码示例：
var formData = new FormData(); formData.append("file", file); uploadSocityImage(formData).then(result => { var fileReader = new FileReader(); fileReader.onload = (e) => { this.imageList.push({ name: result.data, url: e.target.result }); }; fileReader.readAsDataURL(file); });
接收文件流为文件：
var promise = new Promise((resolve, reject) => { getImages(imageName).then(imageResult => { if (!imageResult) return; var fileReader = new FileReader(); fileReader.onload = (e) => { imageItem.url = e.target.result; imageItem.file = new File([imageResult], imageName) ; resolve(null); }; fileReader.readAsDataURL(imageResult); }); });