一. file对象

• 一个FileList 对象通常来自于一个 HTML input 元素的 files 属性,你可以通过这个对象访问到用户所选择的文件，或者拖拽文件

<input type="file" id="upload" @change="choose">
当你选择一张图片时，$("#upload").files 会返回一个对象

File 对象是特殊类型的 Blob，且可以用在任意的 Blob 类型的 context 中

二. base64

• Base64就是一种基于64个可打印字符来表示二进制数据的方法

三. ArrayBuffer

• ArrayBuffer对象、TypedArray对象、DataView对象是JavaScript操作二进制数据的一个接口 不能设置MIME类型，是原始的二进制数据缓冲区，无法直接读取或写入，需要通过具体的视图来读取或写入，即TypedArray对象或DataView对象对内存大小进行读取或写入

四. blob

• Blob 对象表示一个不可变、原始数据的类文件对象

借助FileReader转成其他格式

 FileReader.readAsText(Blob) //将Blob转化为文本字符串

 FileReader.readAsArrayBuffer(Blob) //将Blob转为ArrayBuffer格式数据

 FileReader.readAsDataURL() //将Blob转化为Base64格式的Data URL

choose() {
  let file = this.$refs.upload.files[0];
  const reader = new FileReader();
  reader.onload = function () {
    const content = reader.result;
    console.log('ArrayBuffer结果：',content);
  }
  reader.readAsArrayBuffer(file);
}

五. Buffer

• Buffer是Node.js提供的对象，前端没有。 它一般应用于IO操作，例如接收前端请求数据时候，可以通过以下的Buffer的API对接收到的前端数据进行整合（这里就不介绍了）

六. 互转

1. file对象转base64

  let reader = new FileReader();
  reader.readAsDataURL(file[0])
  console.log(reader)

2. base64 转成blob 上传

function dataURItoBlob(dataURI) {  
    let byteString = atob(dataURI.split(',')[1]);  
    let mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];  
    let ab = new ArrayBuffer(byteString.length);  
    let 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;
  }
  let arr = urlData.split(',')
  let type = arr[0].match(/:(.*?);/)[1]
  let fileExt = type.split('/')[1]
  let bstr = atob(arr[1])
  let n = bstr.length
  let u8arr = new Uint8Array(n)
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new File([u8arr], 'filename.' + fileExt, {
    type: type
  });
}

总结

1. File对象从input选择或者拖拽中产生 files[0]

2. File对象继承Blob，是种特殊的blob

3. blob 是二进制存储容器

   • window.URL.createObjectURL(blob)可以把一个blob转成blobURL，用作图片显示，文件下载（不能再服务器上存储，只能在浏览器使用）
   • blob.slice 分段上传
   • FileReader 转成文本、ArrayBufffer、DATA url等类型

4. ArrayBufffer 是原始存储二进制的缓冲区，相当于定义了一块空间

5. 通过TypeArray 生成内存的视图，代表确定类型的二进制数据

6. DataView也是生成视图的，可以自定义格式和字节序