Blob、File等相关使用详解

念念不忘必有回响

于 2024-09-26 16:21:42 发布

阅读量530

点赞数 5

分类专栏：日常问题记录文章标签：前端

本文链接：https://blog.csdn.net/m0_45093055/article/details/142558070

版权

日常问题记录专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一. 概览

本文主要讲解Blob、File的相关使用方法，以及在实际项目中的应用场景

二. Blob

Blob（Binary Large Object）是一种可以存储大量二进制数据的文件类型。在Web开发中，Blob对象通常用来表示不可变的原始数据，比如图像、音频或视频文件

使用方法：

new Blob(array,options)

array：由 ArrayBuffer、ArrayBufferView、Blob、DOMString 等对象构成的，将会被放进 Blob；
options： type：默认值为 “”，表示将会被放入到 blob 中的数组内容的 MIME 类型。
type的常见取值：

text/plain：纯文本文件。
text/html：HTML 文档。
text/css：CSS 样式表。
text/javascript 或 application/javascript：JavaScript 脚本。
image/jpeg：JPEG 图像文件。
image/png：PNG 图像文件。
audio/mpeg：MP3 音频文件。
video/mp4：MP4 视频文件。
application/pdf：PDF 文档。
application/zip：ZIP 压缩文件
application/vnd.openxmlformats-officedocument.spreadsheetml.shee：
.xlsx 格式的Excel文件
application/vnd.ms-excel：.xls 格式的Excel文件

使用举例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <button id="btn">下载测试</button>
</head>

<body>
  <script>
    const downBtn = document.getElementById('btn');
    downBtn.addEventListener('click', (e) => {
      const blob = new Blob(['123'], { type: "application/vnd.ms-excel" });
      const blobUrl = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = blobUrl;
      a.download = "测试";
      a.dislay = 'none';
      a.click();
      URL.revokeObjectURL(blobUrl)
    })

  </script>
</body>

</html>

可以切换不同的type类型，进行测试。

三. File

File 是 Blob 的一个子类，专门用于表示文件。它继承了 Blob 的所有属性和方法，并且添加了一些与文件相关的额外属性和功能。以下是 File 的一些主要特点：

文件名：File 对象有一个 name 属性，表示文件的名称。
最后修改时间：File 对象有一个 lastModified 属性，表示文件的最后修改时间（以毫秒为单位）。
文件类型：File 对象继承了 Blob 的 type 属性，表示文件的 MIME 类型。
文件大小：File 对象继承了 Blob 的 size 属性，表示文件的大小（以字节为单位）。

创建方式：通常通过元素或拖放操作获取文件，然后将其转换为 File 对象

对比示例

// 创建一个 Blob
let blob = new Blob(["Hello, world!"], { type: "text/plain" });

// 创建一个 File
let file = new File(["Hello, world!"], "example.txt", { type: "text/plain" });

// 获取 Blob 和 File 的属性
console.log(blob.size); // 输出：13
console.log(blob.type); // 输出：text/plain

console.log(file.size); // 输出：13
console.log(file.type); // 输出：text/plain
console.log(file.name); // 输出：example.txt
console.log(file.lastModified); // 输出：文件的最后修改时间

四. FileReader

在JavaScript中，FileReader 对象允许你异步地读取存储在用户计算机上的文件（或Blob和File对象）的内容。它提供了一种方式来读取文件，而无需将整个文件加载到内存中，这对于大文件尤其有用

当你创建一个 FileReader 实例时，你通常会为其指定一个或多个事件处理程序，以便在读取操作的不同阶段接收通知。最常用的事件包括：

onload: 当读取操作成功完成时触发
onerror: 当读取操作发生错误时触发
onabort: 当读取操作被中止时触发（例如，通过调用 abort() 方法）
onloadstart, onprogress, onloadend: 这些事件提供了读取操作进度的更细粒度控制，但并非所有浏览器都支持。

使用示例

<input type="file" id="fileInput">
<script>
  const fileInput = document.getElementById('fileInput');

  // 为文件输入元素添加change事件监听器  
  fileInput.addEventListener('change', function (event) {
    // 获取用户选择的文件  
    const file = event.target.files[0];

    if (file) {
      // 创建一个FileReader实例  
      const reader = new FileReader();

      // 设置onload事件处理程序，以处理读取完成后的文件内容  
      reader.onload = function (e) {
        // 读取完成后的文件内容存储在e.target.result中  
        console.log(e.target.result);
        // 你可以在这里对文件内容做进一步处理，比如显示在网页上  
        document.body.innerHTML += '<p>文件内容: ' + e.target.result + '</p>';
      };

      // 设置onerror事件处理程序，以处理读取过程中发生的错误  
      reader.onerror = function (error) {
        console.error('读取文件时出错:', error);
      };

      // 调用readAsText方法读取文件内容，作为文本处理  
      // 你也可以使用readAsDataURL、readAsArrayBuffer等方法，根据需要读取不同类型的数据  
      reader.readAsText(file);
    }
  });
</script>

注： reader.readAsText执行后，才会执行onload.

五.URL.createObjectURL(blob)和fileReader.readAsDataURL(blob)

URL.createObjectURL(blob)

功能：这个方法创建一个表示参数中指定的 Blob 或 File 的 URL。该 URL 的生命周期与创建它的窗口中的 document 绑定。一旦文档被卸载，URL 就不再有效。
返回值：返回一个指向 Blob 内容的 URL 字符串，这个 URL 可以用在 img 、a 等元素的 src 或 href 属性上。

适用场景：
当你需要将文件或 Blob 显示为图像、音频、视频等媒体时。
当你想要允许用户下载文件，可以将生成的 URL 设置为链接的 href。
如果你只需要临时引用文件，并且不想直接将文件内容嵌入到页面中（如通过 base64 编码)

const blob = new Blob(["Hello, world!"], { type: "text/plain" });
const url = URL.createObjectURL(blob);
// 使用这个 URL，例如设置 img 元素的 src
const img = document.createElement('img');
img.src = url;
document.body.appendChild(img);

// 记得在不需要的时候释放这个 URL
URL.revokeObjectURL(url);

FileReader.readAsDataURL(blob)

功能：这个方法读取指定的 Blob 或 File 的内容。当读取操作完成时，会触发 loadend 事件，此时可以通过 FileReader.result 获取数据，结果是一个 base64 编码的数据 URI。
返回值：没有返回值，但会在异步完成后通过 FileReader.result 提供数据 URI

适用场景：
当你需要将文件的内容作为数据 URL 嵌入到页面中时，比如内联图片。
如果你想对文件内容进行预览而不必发送额外的网络请求。
当需要直接访问文件内容并可能对其进行一些处理（例如压缩、转换格式等）。

const blob = new Blob(["Hello, world!"], { type: "text/plain" });
const reader = new FileReader();
reader.onload = function(event) {
  // event.target.result 包含了 base64 编码的数据 URI
  console.log(event.target.result);
};
reader.readAsDataURL(blob);

六. FileReader.readAsArrayBuffer(blob)

FileReader.readAsArrayBuffer(blob) 方法用于读取指定的 Blob 或 File 的内容。当读取操作完成时，它会将文件的内容以二进制数组（ArrayBuffer）的形式返回。这在处理非文本数据时特别有用，比如图像、音频或视频文件，或者当你需要直接访问二进制数据进行更底层的操作时。

七. FormData

new FormData() 的使用场景非常广泛，特别是在Web开发中处理表单数据和文件上传时。以下是一些具体的例子来说明 new FormData() 的使用场景：

异步表单提交
当需要在不重新加载页面的情况下提交表单时，new FormData() 可以非常方便地收集表单数据，并通过AJAX或Fetch API异步发送到服务器。
文件上传
文件上传是 new FormData() 的另一个重要使用场景。通过元素，用户可以选择一个或多个文件，然后使用 new FormData() 将这些文件添加到FormData对象中，并通过AJAX或Fetch API发送到服务器。这种方式允许文件在不上传整个表单的情况下单独上传。

<input type="file" id="fileInput" multiple>  
<button onclick="uploadFile()">上传文件</button>
<script>
function uploadFile() {  
    let formData = new FormData();  
    let fileInput = document.getElementById('fileInput');  
  
    // 添加文件到FormData对象  
    for (let i = 0; i < fileInput.files.length; i++) {  
        formData.append('files[]', fileInput.files[i]); // 注意：这里使用了数组语法来允许上传多个文件  
    }  
  
    // 使用fetch API发送数据  
    fetch('/upload-files', {  
        method: 'POST',  
        body: formData  
    })  
    .then(response => response.json())  
    .then(data => console.log(data))  
    .catch(error => console.error('Error:', error));  
}
</script>