JS 文件base64、File、Blob、ArrayBuffer 介绍及互转

前言

今天介绍一下文件的二进制家族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 < byteString.length; i++) {  
        ia[i] = byteString.charCodeAt(i);  
    }  
    return new Blob([ab], {type: mimeString});  
}

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也是生成视图的，可以自定义格式和字节序