AI问答：理解 FormData 和 fd.append(‘file‘, file) / 文件上传 / 多文件上传 / form 表单-EW帮帮网

一、前言

在通过接口上传文件的时候，会有这两行代码，那么我们怎么理解呢，本文做下记录

let fd = new FormData()

fd.append('file', file)

FormData 是 JavaScript 中用于构造表单数据的一个接口，主要用于通过 AJAX/Fetch API 发送表单数据，特别是文件上传场景。

1.1、new FormData()

let fd = new FormData();

这行代码创建了一个新的 FormData 对象实例。FormData 对象可以用于：

收集表单数据（包括文件）

通过 JavaScript 动态构建要发送的数据

与 XMLHttpRequest 或 fetch() API 配合使用

1.2、fd.append('file', file)

fd.append('file', file);

这行代码向 FormData 对象添加了一个键值对：

第一个参数 'file'：这是字段名（field name），对应服务器端接收文件时使用的参数名

第二个参数 file：这是一个 File 对象或 Blob 对象，通常来自：

文件输入框 <input type="file"> 的 files 属性

通过拖放操作获取的文件

使用 new File() 构造函数创建的

二、详细理解

2.1、FormData 的用途

FormData 主要用于：

模拟 HTML 表单提交，特别是包含文件上传的表单

发送 multipart/form-data 格式的数据（适合文件上传）

动态构建复杂的数据结构

2. 2、append() 方法

append() 方法用于向 FormData 对象添加数据：

formData.append(name, value);
formData.append(name, blob, filename);
formData.append(name, value, filename);

在 fd.append('file', file) 中：

如果 file 是来自 <input type="file"> 的 File 对象，它已经包含了文件名等信息

也可以添加第三个参数指定文件名：fd.append('file', file, 'custom-name.jpg')

2.3、文件来源示例

// 从文件输入框获取
const fileInput = document.querySelector('input[type="file"]');
const file = fileInput.files[0];

// 或者通过拖放获取
const droppedFile = event.dataTransfer.files[0];

// 然后添加到 FormData
const fd = new FormData();
fd.append('file', file);  // 或 droppedFile

2.4、发送 FormData

// 使用 fetch API
fetch('/upload', {
  method: 'POST',
  body: fd  // 不需要设置 Content-Type，浏览器会自动设置 multipart/form-data
});

// 使用 XMLHttpRequest
const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload');
xhr.send(fd);

2.5、服务器端接收

服务器端（如 Node.js + Express）可以这样接收：

const multer = require('multer');
const upload = multer();

app.post('/upload', upload.single('file'), (req, res) => {
  // req.file 包含上传的文件
  console.log(req.file);
});

2.6、多个文件或字段

可以添加多个字段：

fd.append('username', 'john');
fd.append('avatar', file1);
fd.append('gallery', file2);
fd.append('gallery', file3);  // 同名字段可以添加多个

2.7、与普通表单数据对比

普通表单提交：

<form action="/upload" method="post" enctype="multipart/form-data">
  <input type="text" name="username">
  <input type="file" name="file">
  <button>Submit</button>
</form>

FormData 相当于在 JavaScript 中以编程方式构建了这样的表单数据。

三、注意事项

3.1、使用 FormData 时不需要手动设置 Content-Type 为 multipart/form-data，浏览器会自动处理

3.2、可以添加任意数量的字段，包括文本和文件

3.3、同一个字段名可以添加多个值（如多个文件）

3.4、在 Node.js 服务器端，需要使用如 multer、formidable 等中间件来处理上传的文件

FormData 是现代 Web 开发中处理文件上传的核心 API 之一，理解它的工作原理对于实现文件上传功能至关重要。

AI问答：理解 FormData 和 fd.append(‘file‘, file) / 文件上传 / 多文件上传 / form 表单