Fetch request.formData() 方法

在本章节中，我们将详细介绍 request.formData() 方法的使用。formData() 方法返回一个 FormData 对象，该对象包含了当前请求的 FormData 数据。

FormData 对象简介

FormData 对象用于表示表单数据，并且可以方便地将这些数据序列化为适合在 HTTP 请求中发送的形式。这个对象主要用于处理文件上传和 POST 请求中的复杂数据。

创建 FormData 对象

可以通过以下几种方式创建 FormData 对象：

• 直接实例化：

  const formData = new FormData();

• 使用现有表单元素：

  const formElement = document.querySelector('form');
  const formDataFromForm = new FormData(formElement);

使用 request.formData()

request.formData() 方法用于获取当前请求中的 FormData 对象。这在处理表单提交和文件上传时非常有用。

基本用法

首先，我们需要设置一个简单的表单：

<form id="uploadForm">
  <input type="text" name="username" />
  <input type="file" name="avatar" />
  <button type="submit">上传</button>
</form>

然后，我们使用 JavaScript 来监听表单的提交事件，并通过 fetch 发送请求：

// www.javascriptcn.com code example
document.getElementById('uploadForm').addEventListener('submit', function (event) {
  event.preventDefault(); // 阻止表单默认提交行为

  const formData = new FormData(event.target); // 获取表单数据

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

在服务器端处理 FormData

服务器端需要能够解析 FormData 对象。这里以 Node.js 和 Express 为例：

// www.javascriptcn.com code example
const express = require('express');
const fileUpload = require('express-fileupload');

const app = express();

// 使用中间件来处理文件上传
app.use(fileUpload());

app.post('/api/upload', (req, res) => {
  // 处理表单数据
  const username = req.body.username;
  const avatar = req.files.avatar;

  // 处理文件上传
  if (avatar) {
    const filePath = avatar.tempFilePath;
    // 进行文件保存或其他操作
    // ...

    res.json({ message: '文件上传成功', username, filePath });
  } else {
    res.status(400).json({ error: '缺少文件' });
  }
});

app.listen(3000, () => console.log('服务器运行在 http://localhost:3000'));

处理多文件上传

如果表单中有多个文件输入字段，我们可以遍历 req.files 对象来处理每个文件：

// www.javascriptcn.com code example
app.post('/api/upload', (req, res) => {
  const files = req.files;

  if (!files || Object.keys(files).length === 0) {
    return res.status(400).json({ error: '缺少文件' });
  }

  const results = [];

  for (const fieldName in files) {
    const file = files[fieldName];

    // 进行文件保存或其他操作
    // ...

    results.push({ fieldName, filePath: file.tempFilePath });
  }

  res.json({ message: '文件上传成功', results });
});

注意事项

• FormData 对象中的键值对是 URL 编码的。
• 当使用 FormData 发送文件时，确保 Content-Type 被设置为 multipart/form-data。
• 文件上传时，注意文件大小限制和安全性检查。

总结

通过本章节的学习，你应该已经掌握了如何使用 request.formData() 方法来处理表单数据和文件上传。希望这些示例代码和注意事项能帮助你在实际项目中更有效地使用 Fetch API。