从Blob、File到Antd Upload：前端文件处理的全面指南

前端

2023-09-29 03:58:55

深入探究 Blob 和 File 对象：前端文件处理的基石

在现代前端开发中，文件处理已经变得至关重要，无论是图片上传、文件下载还是高级功能，如拖拽上传和自定义进度条。对于这些任务，Blob 和 File 对象是不可或缺的工具。

Blob 和 File 对象：核心概念

Blob 对象

Blob 对象是一种二进制大对象，可存储各种类型的二进制数据，例如图片、音频文件和文本文件。它提供了一个统一的接口来处理不同类型的文件数据。

File 对象

File 对象是 Blob 对象的子类，专门用于处理文件。除了 Blob 对象的功能外，它还提供了文件特有的属性和方法，如文件名、文件大小和文件类型。

使用 Blob 和 File 对象

使用 Blob 和 File 对象非常简单，只需几个步骤：

创建 Blob 或 File 对象：

const blob = new Blob(['Hello, world!']);
const file = new File(['Hello, world!'], 'hello.txt', { type: 'text/plain' });

读取 Blob 或 File 对象的内容：

blob.text().then(text => {
  console.log(text);
});

file.arrayBuffer().then(buffer => {
  console.log(buffer);
});

保存 Blob 或 File 对象到本地：

blob.saveAs('hello.txt');
file.saveAs('hello.txt');

发送 Blob 或 File 对象到服务器：

const formData = new FormData();
formData.append('file', file);

fetch('/upload', {
  method: 'POST',
  body: formData
}).then(response => {
  console.log(response);
});

Ant Design 的 Upload 组件

Ant Design 的 Upload 组件是 React 中一个强大的文件上传工具，具有丰富的功能和直观的界面：

基本用法：

import { Upload } from 'antd';

const props = {
  action: '/upload',
  onChange(info) {
    if (info.file.status === 'done') {
      console.log('上传成功');
    }
  },
};

<Upload {...props}>
  <Button>上传文件</Button>
</Upload>;