共计 3323 个字符，预计需要花费 9 分钟才能阅读完成。
前言
今天介绍一下文件的二进制家族 js,file,base64,File,Blob,ArrayBuffer。
案例，假如有一个需求，我们通过解析等方式拿到了文件的二进制 uint8array 或者 base64 或者 blob，我们如何通过 ajax 提交给后端接口呢？
二进制互转
1. file 对象转 base64
let reader = new FileReader();
reader.readAsDataURL(file[0])
console.log(reader)2. base64 转成 blob 上传
function dataURItoBlob(dataURI) {var byteString = atob(dataURI.split(',')[1]);
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i 3. blob 转成 ArrayBuffer
let blob = new Blob([1,2,3,4])
let reader = new FileReader();
reader.onload = function(result) {console.log(result);
}
reader.readAsArrayBuffer(blob);4. buffer 转成 blob
let blob = new Blob([buffer])5. base64 转 file
const base64ConvertFile = function (urlData, filename) { // 64 转 file
if (typeof urlData != 'string') {this.$toast("urlData 不是字符串")
return;
}
var arr = urlData.split(',')
var type = arr[0].match(/:(.*?);/)[1]
var fileExt = type.split('/')[1]
var bstr = atob(arr[1])
var n = bstr.length
var u8arr = new Uint8Array(n)
while (n--) {u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], 'filename.' + fileExt, {type: type});
}文件 ajax 上传
const config = {headers:{'Content-Type':'multipart/form-data'}
}
let fileObj= base64ConvertFile(base64 文件, 文件名称)
let formdata = new FormData()
formdata.append('file',fileObj, 名称)
request.uploadImage(formdata,'', config).then(res=>{}) // 封装的 axiso 请求 介绍
首先介绍二进制数组
二进制数组由三个对象组成。
（1）ArrayBuffer 对象：代表内存之中的一段二进制数据，可以通过“视图”进行操作。“视图”部署了数组接口，这意味着，可以用数组的方法操作内存。
（2)
TypedArray 对象：用来生成内存的视图，通过 9 个构造函数，可以生成 9 种数据格式的视图，比如 Uint8Array（无符号 8 位整数）数组视图,
Int16Array（16 位整数）数组视图, Float32Array（32 位浮点数）数组视图等等。（3）DataView 对象：用来生成内存的视图，可以自定义格式和字节序，比如第一个字节是 Uint8（无符号 8 位整数）、第二个字节是 Int16（16 位整数）、第三个字节是 Float32（32 位浮点数）等等。
ArrayBuffer 对象代表储存二进制数据的一段内存，它不能直接读写，只能通过视图（TypedArray 视图和 DataView 视图 ) 来读写，视图的作用是以指定格式解读二进制数据。
var buffer = new ArrayBuffer(12);
var x1 = new Int32Array(buffer);
x1[0] = 1;
var x2 = new Uint8Array(buffer);
x2[0] = 2;
x1[0] // 2二进制的文件形式可以出现在如下场景中：
一、AJAX
传统上，服务器通过 AJAX 操作只能返回文本数据，即 responseType 属性默认为 text。XMLHttpRequest 第二版 XHR2 允许服务器返回二进制数据，如下：
var xhr = new XMLHttpRequest();
xhr.open('GET', someUrl);
xhr.responseType = 'arraybuffer';
xhr.onload = function () {
var let arrayBuffer = xhr.response;
// ···
};
xhr.send();二、Canvas
网页 Canvas 元素输出的二进制像素数据，就是类型化数组。
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var uint8ClampedArray = imageData.data;三、WebSocket
WebSocket 可以通过 ArrayBuffer，发送或接收二进制数据。
var socket = new WebSocket('ws://127.0.0.1:8081');
socket.binaryType = 'arraybuffer';
// Wait until socket is open
socket.addEventListener('open', function (event) {
// Send binary data
var typedArray = new Uint8Array(4);
socket.send(typedArray.buffer);
});
// Receive binary data
socket.addEventListener('message', function (event) {
var arrayBuffer = event.data;
// ···
});四、Fetch API
Fetch API 取回的数据，就是 ArrayBuffer 对象。
fetch(url)
.then(function(request){return request.arrayBuffer()
})
.then(function(arrayBuffer){// ...});五、File API
如果知道一个文件的二进制数据类型，也可以将这个文件读取为 ArrayBuffer 对象。
var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];
var reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = function () {
var arrayBuffer = reader.result;
// ···
};小结
1、File 对象从 input 选择或者拖拽中产生 files[0]
File 对象继承 Blob，是种特殊的 blob
2、blob 是二进制存储容器
window.URL.createObjectURL(blob) 可以把一个 blob 转成 blobURL，用作图片显示，文件下载（不能再服务器上存储，只能在浏览器使用）
blob.slice 分段上传
3、FileReader 转成文本、ArrayBufffer、DATA url 等类型
4、ArrayBufffer 是原始存储二进制的缓冲区，相当于定义了一块空间
5、通过 TypeArray 生成内存的视图，代表确定类型的二进制数据
6、DataView 也是生成视图的，可以自定义格式和字节序
