Raydenm-文章

前端文件处理全指南

2022/03/10

一、文件数据格式

1. Blob (Binary Large Object)

Blob 对象: 表示不可变的、原始数据的类文件对象，可以是文本或二进制数据。Blob 是处理文件操作的核心对象，支持部分读取文件内容。

2. ArrayBuffer

ArrayBuffer: 表示一个通用的、固定长度的原始二进制数据缓冲区。它用于低级别操作，例如处理图像、视频、音频或其他需要精确二进制操作的数据。

3. Data URL

Data URL: 使用 base64 编码将文件内容直接嵌入到 URL 中，通常用于在网页中嵌入小型图片或文件。

4. 数据流 (Streams)

ReadableStream/ReadableStreamDefaultReader: 表示一个读取操作的流，允许逐步读取大文件而不需要一次性加载全部数据，适合处理大文件或长时间传输的情况。
WritableStream: 表示一个写入操作的流，适用于逐步写入数据到某个目标，比如文件或网络。

5. 二进制格式

二进制文件格式: 包括图像文件（如 PNG、JPEG）、音频文件（如 MP3、WAV）、视频文件（如 MP4、WebM）等。通常通过 ArrayBuffer 或 Blob 进行处理。
File 对象: 继承自 Blob，表示用户在表单控件中选取的文件，可以包含二进制或文本数据。

二、数据格式转换

1. Blob 与 ArrayBuffer 之间的转换

Blob 转 ArrayBuffer:

const blob = new Blob([data], { type: 'application/octet-stream' });
const reader = new FileReader();
reader.readAsArrayBuffer(blob);
reader.onload = () => {
  const arrayBuffer = reader.result; // ArrayBuffer
};

ArrayBuffer 转 Blob:
```
const arrayBuffer = new Uint8Array([0x00, 0x01, 0x02]).buffer;
const blob = new Blob([arrayBuffer], { type: 'application/octet-stream' });
```
关系: Blob 是一个高层次的文件对象，ArrayBuffer 则是一个底层的二进制数据缓冲区。Blob 可以包含 ArrayBuffer 的数据，而 ArrayBuffer 则可以从 Blob 中提取出来用于更精细的操作。

2. Blob 与 Data URL 之间的转换

Blob 转 Data URL:

const reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = () => {
  const dataURL = reader.result; // Data URL
};

Data URL 转 Blob:

function dataURLToBlob(dataURL) {
  const parts = dataURL.split(',');
  const byteString = atob(parts[1]);
  const mimeString = parts[0].split(':')[1].split(';')[0];

  const arrayBuffer = new ArrayBuffer(byteString.length);
  const intArray = new Uint8Array(arrayBuffer);

  for (let i = 0; i < byteString.length; i++) {
    intArray[i] = byteString.charCodeAt(i);
  }

  return new Blob([intArray], { type: mimeString });
}

关系: Data URL 是一种将二进制数据以 Base64 编码形式表示的字符串，适用于直接嵌入在 HTML 文档中。Blob 可以通过 FileReader 转换为 Data URL，以便嵌入或传输，而 Data URL 也可以转换回 Blob 以用于进一步处理。

3. Blob 与 Streams 之间的转换

Blob 转 ReadableStream:
```
const stream = blob.stream();
```
ReadableStream 转 Blob:
```
const response = new Response(stream);
const blob = await response.blob();
```
关系: Streams 提供了处理数据的逐块读取或写入方式，适合处理大文件或流媒体内容。Blob 对象可以直接生成 ReadableStream 以进行流式传输，而流也可以被转换回 Blob 以便在前端进行文件操作。

4. ArrayBuffer 与 TypedArray 的关系

ArrayBuffer 与 TypedArray 的相互转换:
```
const arrayBuffer = new ArrayBuffer(8);
const uint8Array = new Uint8Array(arrayBuffer);

// TypedArray 也是 ArrayBuffer 的视图
const newArrayBuffer = uint8Array.buffer;
```
关系: TypedArray 是 ArrayBuffer 的视图，提供了对二进制数据的访问。TypedArray 允许以特定的数据类型（如 Uint8Array、Float32Array 等）来操作 ArrayBuffer，适用于需要处理二进制数据的场景。

这些数据格式之间的转换关系为前端开发者提供了灵活的文件操作手段：

Blob: 高层次的二进制对象，适合处理文件数据。
ArrayBuffer: 底层二进制数据缓冲区，适用于精细化的数据操作。
Data URL: 将二进制数据嵌入到字符串中，适用于嵌入内容。
Streams: 流式处理大文件或数据，适合逐步读取或写入内容。

三、文件获取

在前端开发中，获取文件的方式多种多样，具体方式取决于文件的来源。以下是几种常见的前端获取文件的方式：

1. 使用 `<input type="file">` 选择文件

描述: 最常见的方式，通过文件输入控件让用户从本地文件系统中选择文件。

示例:

<input type="file" id="fileInput" />
<script>
  const fileInput = document.getElementById('fileInput');
  fileInput.addEventListener('change', (event) => {
    const files = event.target.files; // FileList 对象
    const file = files[0]; // 获取第一个文件
  });
</script>

应用场景: 上传图片、文档或其他用户本地文件。

2. 使用 Drag and Drop 拖放文件

描述: 支持用户通过拖拽文件到指定区域来上传文件。

示例:

<div id="dropArea" style="width: 200px; height: 200px; border: 2px dashed #ccc;">
  拖放文件到此处
</div>
<script>
  const dropArea = document.getElementById('dropArea');
  dropArea.addEventListener('dragover', (event) => {
    event.preventDefault();
  });
  dropArea.addEventListener('drop', (event) => {
    event.preventDefault();
    const files = event.dataTransfer.files; // FileList 对象
    const file = files[0]; // 获取第一个文件
  });
</script>

应用场景: 更加直观的文件上传体验，常用于图片或多文件上传。

3. 通过 `fetch` 或 `XMLHttpRequest` 下载文件

描述: 使用 fetch 或 XMLHttpRequest 从服务器获取文件，通常用于下载或预览文件。

示例:

// 使用 fetch 获取文件
fetch('https://example.com/file.zip')
  .then(response => response.blob())
  .then(blob => {
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'file.zip';
    document.body.appendChild(a);
    a.click();
    URL.revokeObjectURL(url);
  });

应用场景: 从服务器下载文件或获取文件数据用于处理。

4. 使用 Web APIs 读取文件

FileReader API: 用于读取用户选择的文件内容，包括文本、图片、二进制数据等。

示例:

const reader = new FileReader();
reader.onload = function(event) {
  const text = event.target.result; // 读取的文本内容
};
reader.readAsText(file); // 可以读取为文本、Data URL 或 ArrayBuffer

应用场景: 在客户端预览文件内容或在不上传到服务器的情况下进行处理。

5. 使用 `URL.createObjectURL` 创建文件的临时 URL

描述: 通过 URL.createObjectURL 为 Blob 或 File 对象创建一个临时的 URL，适用于在页面中展示文件内容。

示例:

const url = URL.createObjectURL(file);
const img = document.createElement('img');
img.src = url;
document.body.appendChild(img);

应用场景: 在不上传文件的情况下预览图片或视频内容。

6. 通过 WebSockets 或 WebRTC 获取文件

描述: 通过实时通信协议如 WebSockets 或 WebRTC 获取文件数据，通常用于实时传输或点对点文件共享。

示例:

// 通过 WebSocket 接收文件的二进制数据
const socket = new WebSocket('wss://example.com/socket');
socket.binaryType = 'arraybuffer';
socket.onmessage = (event) => {
  const arrayBuffer = event.data; // 获取的二进制数据
  const blob = new Blob([arrayBuffer]);
};

应用场景: 实时文件传输或文件共享应用。

7. 通过 Service Worker 拦截文件请求

描述: 使用 Service Worker 拦截网络请求并返回缓存或预定义的文件内容，适用于离线访问或优化文件加载。

示例:

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    })
  );
});

应用场景: 提高文件加载速度、离线访问文件。

四、文件上传

1. 传统表单上传

描述: 最基础的文件上传方式，通过 <form> 元素将文件提交到服务器。文件通过表单的 POST 请求发送，页面会刷新。

示例:

<form action="/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="file">
  <button type="submit">上传</button>
</form>

特点:
- 简单易用，兼容性好。
- 适合小型文件上传或低需求场景。
- 页面会刷新，用户体验较差。

2. 使用 `FormData` 和 `XMLHttpRequest`

描述: 利用 FormData 和 XMLHttpRequest 实现异步文件上传，无需页面刷新。

示例:

const formData = new FormData();
const fileInput = document.querySelector('input[type="file"]');
formData.append('file', fileInput.files[0]);

const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.onload = () => {
  if (xhr.status === 200) {
    console.log('上传成功');
  }
};
xhr.send(formData);

特点:
- 支持异步上传，用户体验较好。
- 可以处理文件上传进度。
- 适合中小型文件上传。

3. 使用 `fetch` 和 `FormData`

描述: 现代化的文件上传方式，利用 fetch API 和 FormData 进行异步上传。

示例:

const formData = new FormData();
const fileInput = document.querySelector('input[type="file"]');
formData.append('file', fileInput.files[0]);

fetch('/upload', {
  method: 'POST',
  body: formData
})
.then(response => response.json())
.then(data => console.log('上传成功:', data))
.catch(error => console.error('上传失败:', error));

特点:
- 使用 fetch API，语法更加简洁、现代。
- 支持异步操作和流式处理。
- 适合现代浏览器环境。

4. 文件分块上传

描述: 将大文件分成多个小块上传，通常用于处理大文件或网络不稳定的场景。上传时，每一块单独上传，服务器端合并这些块。

示例:

const file = fileInput.files[0];
const chunkSize = 1024 * 1024; // 1MB
const totalChunks = Math.ceil(file.size / chunkSize);

for (let i = 0; i < totalChunks; i++) {
  const chunk = file.slice(i * chunkSize, (i + 1) * chunkSize);
  const formData = new FormData();
  formData.append('fileChunk', chunk);
  formData.append('chunkIndex', i);

  fetch('/upload_chunk', {
    method: 'POST',
    body: formData
  }).then(response => console.log(`Chunk ${i + 1}/${totalChunks} uploaded.`));
}

特点:
- 适合大文件或不稳定网络环境。
- 提供更好的上传成功率。
- 可以实现断点续传。

5. 多文件上传

描述: 支持一次选择并上传多个文件，通常结合 FormData 和 multiple 属性使用。

示例:

<input type="file" multiple>
<script>
  const fileInput = document.querySelector('input[type="file"]');
  const formData = new FormData();

  for (const file of fileInput.files) {
    formData.append('files[]', file);
  }

  fetch('/upload', {
    method: 'POST',
    body: formData
  }).then(response => console.log('上传成功'));
</script>

特点:
- 允许一次选择并上传多个文件。
- 使用 FormData 轻松处理多个文件的上传。
- 适合需要批量上传文件的场景。

6. 文件拖放上传

描述: 用户可以将文件拖拽到指定区域进行上传，提升用户体验。

示例:

<div id="dropArea" style="width: 200px; height: 200px; border: 2px dashed #ccc;">
  拖放文件到此处
</div>
<script>
  const dropArea = document.getElementById('dropArea');
  dropArea.addEventListener('dragover', (event) => {
    event.preventDefault();
  });
  dropArea.addEventListener('drop', (event) => {
    event.preventDefault();
    const files = event.dataTransfer.files;
    const formData = new FormData();
    for (const file of files) {
      formData.append('files[]', file);
    }
    fetch('/upload', {
      method: 'POST',
      body: formData
    }).then(response => console.log('上传成功'));
  });
</script>

特点:
- 提供直观的拖放操作。
- 适合提升用户体验的场景。

7. 使用第三方库或服务

描述: 通过第三方库（如 Dropzone.js、FineUploader）或第三方云服务（如 AWS S3、Firebase Storage）进行文件上传。

示例:

const myDropzone = new Dropzone("#my-dropzone", {
  url: "/upload"
});

特点:
- 提供更多高级功能，如断点续传、自动缩略图生成、文件压缩等。
- 适合需要复杂或高级功能的场景。

五、文件处理的常见形式

1. 文件读取与预览

描述: 从用户上传或选择的文件中读取内容，并在前端进行预览或进一步处理。

形式:

文本读取: 使用 FileReader API 读取文件内容为文本。

const fileInput = document.querySelector('input[type="file"]');
const reader = new FileReader();
reader.onload = function(event) {
  const text = event.target.result; // 读取到的文本内容
  console.log(text);
};
reader.readAsText(fileInput.files[0]);

图片预览: 读取图像文件并在页面上展示预览。

const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', function() {
  const file = fileInput.files[0];
  const img = document.createElement('img');
  img.src = URL.createObjectURL(file);
  document.body.appendChild(img);
});

2. 文件格式转换

描述: 将文件从一种格式转换为另一种格式，比如将图片从 PNG 转换为 JPEG，将文本文件编码转换为 Base64 等。

形式:

图像格式转换: 使用 <canvas> 将图像转换为不同的格式。

const img = new Image();
img.src = 'image.png';
img.onload = () => {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0);
  canvas.toBlob((blob) => {
    const newImg = document.createElement('img');
    newImg.src = URL.createObjectURL(blob);
    document.body.appendChild(newImg);
  }, 'image/jpeg');
};

Base64 编码转换: 将文件内容转换为 Base64 编码，适用于嵌入图像或文本。

const reader = new FileReader();
reader.onload = function(event) {
  const base64String = event.target.result; // Base64 编码
  console.log(base64String);
};
reader.readAsDataURL(fileInput.files[0]);

3. 文件压缩与优化

描述: 对文件进行压缩或优化，以减少文件体积或提高加载速度，通常用于图像、视频、音频等多媒体文件。

形式:

图像压缩: 使用 <canvas> 压缩图像文件的体积。

const img = new Image();
img.src = 'image.png';
img.onload = () => {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0);
  canvas.toBlob((blob) => {
    const compressedImg = URL.createObjectURL(blob);
    document.body.appendChild(compressedImg);
  }, 'image/jpeg', 0.7); // 0.7 是压缩质量
};

文本压缩: 使用 JavaScript 压缩文本文件内容，例如使用 Gzip 等压缩算法。

import pako from 'pako';

const text = 'This is a sample text.';
const compressed = pako.deflate(text, { to: 'string' });
console.log(compressed);

4. 文件加密与解密

描述: 对文件进行加密处理以保护敏感数据，或对加密文件进行解密。

形式:

文件加密: 使用 Crypto API 对文件内容进行加密。

const key = crypto.subtle.generateKey({
  name: "AES-GCM",
  length: 256,
}, true, ["encrypt", "decrypt"]);

const data = new TextEncoder().encode("Sensitive data");
const encryptedData = crypto.subtle.encrypt({
  name: "AES-GCM",
  iv: crypto.getRandomValues(new Uint8Array(12))
}, key, data);

文件解密: 使用 Crypto API 对加密内容进行解密。

const decryptedData = crypto.subtle.decrypt({
  name: "AES-GCM",
  iv: iv
}, key, encryptedData);

5. 文件分块处理

描述: 将大文件分成小块进行处理，通常用于大文件上传、下载或处理，减少内存占用并提高性能。

形式:

文件分块读取: 使用 slice() 方法将文件分块读取。

const file = fileInput.files[0];
const chunkSize = 1024 * 1024; // 1MB
for (let i = 0; i < file.size; i += chunkSize) {
  const chunk = file.slice(i, i + chunkSize);
  // 处理每个块
}

分块上传: 将文件分块后逐块上传到服务器。

const file = fileInput.files[0];
const chunkSize = 1024 * 1024;
for (let i = 0; i < file.size; i += chunkSize) {
  const chunk = file.slice(i, i + chunkSize);
  const formData = new FormData();
  formData.append('fileChunk', chunk);
  fetch('/upload_chunk', { method: 'POST', body: formData });
}

6. 文件内容修改

描述: 直接修改文件内容或对文件内容进行编辑处理。

形式:

文本文件修改: 读取文本文件后进行修改并保存。

const reader = new FileReader();
reader.onload = function(event) {
  let text = event.target.result;
  text = text.replace('oldText', 'newText');
  const blob = new Blob([text], { type: 'text/plain' });
  const url = URL.createObjectURL(blob);
  // 下载或显示修改后的文件
};
reader.readAsText(fileInput.files[0]);

图像编辑: 在 <canvas> 上对图像进行修改或添加效果。

const img = new Image();
img.src = 'image.png';
img.onload = () => {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0);
  // 添加图像效果，如滤镜或水印
  ctx.filter = 'grayscale(100%)';
  ctx.drawImage(img, 0, 0);
  const editedImage = canvas.toDataURL();
  document.body.appendChild(canvas);
};

7. 文件存储与下载

描述: 将处理后的文件保存或下载到用户设备中。

形式:

文件下载: 生成文件并触发下载，通常结合 Blob 和 URL.createObjectURL 使用。

const blob = new Blob(['Hello, world!'], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'hello.txt';
document.body.appendChild(a);
a.click();
URL.revokeObjectURL(url);

本地存储: 使用 localStorage 或 IndexedDB 保存文件内容。

localStorage.setItem('fileData', base64String);
// 或使用 IndexedDB 保存较大的二进制文件