谈谈：File、Blob、FileReader、ArrayBuffer、base64-Toy模板网

这篇具有很好参考价值的文章主要介绍了谈谈：File、Blob、FileReader、ArrayBuffer、base64。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

JavaScript 提供了一些 API 来处理文件或原始文件数据，例如：File、Blob、FileReader、ArrayBuffer、base64 等。下面就来看看它们都是如何使用的，它们之间又有何区别和联系。谈谈：File、Blob、FileReader、ArrayBuffer、base64

1. Blob

Blob全称为binary large Object 即二进制大对象，他是js中的一个对象，表示原始类似文件的数据。MDN中的解释：

Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作。

Blob 表示的不一定是 JavaScript 原生格式的数据。

(1)可以使用Blob()创建一个blob：

new Blob(array, options);

其中两个参数：

array ：可以是ArrayBuffer、ArrayBufferView、Blob、DOMString等对象构成的，将会被放进BLob；
option ：可选的BlobPropertyBag字典。

谈谈：File、Blob、FileReader、ArrayBuffer、base64

 const obj = { hello: "world" };
    const blob = new Blob([JSON.stringify(obj, null, 2)], {
      type: "application/json",
    });
    console.log("blob", blob);

谈谈：File、Blob、FileReader、ArrayBuffer、base64

URL.createObjectURL() 将Blob对象转为url地址

谈谈：File、Blob、FileReader、ArrayBuffer、base64

2. FIle

File 接口基于 Blob，继承了 blob 的功能并将其扩展以支持用户系统上的文件。

File 对象是特殊类型的 Blob，且可以用在任意的 Blob 类型的 context 中。比如说， FileReader, URL.createObjectURL(), createImageBitmap() (en-US), 及 XMLHttpRequest.send() 都能处理 Blob 和 File。

3.FileReader

FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

// FileReader && Blob/File转化
// FileReader 对象允许web应用程序异步读取存储在用户计算机上的文件内容
export const readBlob = (blob, type) => {
  return new Promise((resolve) => {
    let reader = new FileReader();
    reader.onload = (event) => {
      resolve(event.target.result);
    };
    switch (type) {
      case "ArrayBuffer":
        // 生成ArrayBUffer
        reader.readAsArrayBuffer(blob);
        break;
      case "DataUrl":
        // 生成base64
        reader.readAsDataURL(blob);
        break;
      case "Text":
        reader.readAsText(blob, "utf-8");
        break;
      default:
        break;
    }
  });
};

4.base64

Base64 是一种基于64个可打印字符来表示二进制数据的表示方法。Base64 编码普遍应用于需要通过被设计为处理文本数据的媒介上储存和传输二进制数据而需要编码该二进制数据的场景。这样是为了保证数据的完整并且不用在传输过程中修改这些数据。

在 JavaScript 中，有两个函数被分别用来处理解码和编码 base64 字符串：

atob()：解码，解码一个 Base64 字符串；
btoa()：编码，从一个字符串或者二进制数据编码一个 Base64 字符串。

btoa("JavaScript")       // 'SmF2YVNjcmlwdA=='
atob('SmF2YVNjcmlwdA==') // 'JavaScript'

也可以利用canvas画布中的toDataURL生成base64.

 /**
     * @param url 图片路径
     */
    function getUrlBase64(url) {
      return new Promise((resolve, reject) => {
        let canvas = document.createElement("canvas");
        const ctx = canvas.getContext("2d");
        let img = new Image();
        img.crossOrigin = "Anonymous"; //开启img的“跨域”模式
        img.src = url;
        img.onload = function() {
          canvas.height = img.height;
          canvas.width = img.width;
          ctx.drawImage(img, 0, 0, img.width, img.height); //参数可自定义
          const dataURL = canvas.toDataURL("image/jpeg",1); //获取Base64编码
          resolve(dataURL);
          canvas = null; //清除canvas元素
          img = null; //清除img元素
        };
        img.onerror = function() {
          reject(new Error("Could not load image at " + url));
        };
      });
    }

也可以使用FileReader.

// FileReader && Blob/File转化
// FileReader 对象允许web应用程序异步读取存储在用户计算机上的文件内容
export const readBlob = (blob, type) => {
  return new Promise((resolve) => {
    let reader = new FileReader();
    reader.onload = (event) => {
      resolve(event.target.result);
    };
    switch (type) {
      case "ArrayBuffer":
        // 生成ArrayBUffer
        reader.readAsArrayBuffer(blob);
        break;
      case "DataUrl":
        // 生成base64
        reader.readAsDataURL(blob);
        break;
      case "Text":
        reader.readAsText(blob, "utf-8");
        break;
      default:
        break;
    }
  });
};

base64 转 blob

// 将base64转为blob
export function base64toBlob(base64) {
  let bstr = window.atob(base64), // 获得base64解码后的字符串
    n = bstr.length,
    u8arr = new Uint8Array(n); // 新建一个8位的整数类型数组，用来存放ASCII编码的字符串
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n); // 转换编码后才使用charCodeAt 找到Unicode编码
  }
  const fileStream = new Blob([u8arr], { type: "text/plain" });
  const url = URL.createObjectURL(fileStream);

  return url;
}

5.ArrayBuffer

ArrayBuffer对象用来表示通用的、固定长度的原始二进制数据缓冲区。他是一个字节数组，通常在其他语言中称为“byte array”。你不用直接操作ArrayBuffer中的内容；而是通过类型化数组对象或DataView对象来操作，他们会将缓冲区中的数据表示为特定的格式，并通过这些读写缓冲区的内容。文章来源地址https://www.toymoban.com/news/detail-490740.html

// FileReader && Blob/File转化
// FileReader 对象允许web应用程序异步读取存储在用户计算机上的文件内容
export const readBlob = (blob, type) => {
  return new Promise((resolve) => {
    let reader = new FileReader();
    reader.onload = (event) => {
      resolve(event.target.result);
    };
    switch (type) {
      case "ArrayBuffer":
        // 生成ArrayBUffer
        reader.readAsArrayBuffer(blob);
        break;
      case "DataUrl":
        // 生成base64
        reader.readAsDataURL(blob);
        break;
      case "Text":
        reader.readAsText(blob, "utf-8");
        break;
      default:
        break;
    }
  });
};

到了这里，关于谈谈：File、Blob、FileReader、ArrayBuffer、base64的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！