JavaScript FormData上传文件完整指南

引言

在现代的Web应用程序开发中，文件上传是一个非常常见的需求。JavaScript提供了FormData对象，它可以方便地通过AJAX将文件从客户端上传到服务器。

本文将详细介绍如何使用JavaScript的FormData对象，以及如何处理文件上传过程中的常见问题和错误。

FormData简介

FormData是一个内置对象，它提供了一种方便的方式来捕获表单数据（包括文件）并将其格式化为可以轻松发送到服务器的字符串。

使用FormData对象可以简化文件上传的过程，而无需手动处理HTTP请求的细节。

文件上传的基本步骤

下面是使用JavaScript进行文件上传的基本步骤：

创建一个FormData对象。
通过append方法将文件添加到FormData对象中。
使用AJAX发送FormData对象到服务器。
在服务器端接收并处理FormData对象。

在下面的章节中，我们将逐一介绍每个步骤。

创建FormData对象

要创建一个FormData对象，只需调用FormData的构造函数即可：

const formData = new FormData();

添加文件到FormData

要将文件添加到FormData对象中，可以使用append方法。append方法接受两个参数，第一个参数是字段名（用于在服务器端获取文件），第二个参数是文件对象。

下面的代码演示了如何将一个文件添加到FormData对象中：

const input = document.querySelector('input[type="file"]');
const file = input.files[0];
const fieldName = 'file';

formData.append(fieldName, file);

发送FormData到服务器

一旦我们准备好FormData对象，就可以使用AJAX发送它到服务器了。

下面的代码展示了如何使用XMLHttpRequest对象发送一个FormData对象：

const xhr = new XMLHttpRequest();
const url = '/upload';

xhr.open('POST', url);

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log('文件上传成功！');
  }
};

xhr.send(formData);

在上面的代码中，我们使用open方法来配置HTTP请求的方法（POST）和URL。然后，我们通过onreadystatechange事件监听器来检测请求状态的变化。最后，我们使用send方法将FormData对象发送到服务器。

服务器端处理FormData

在服务器端，如何处理接收到的FormData对象取决于你使用的后端技术栈。

在下面的例子中，我们将使用Node.js的express框架来处理文件上传。

首先，我们需要安装express和multer（一个用于处理multipart/form-data的中间件）：

npm install express multer

然后，创建一个名为server.js的文件，并添加以下代码：

const express = require('express');
const multer = require('multer');
const path = require('path');

const app = express();
const upload = multer({ dest: 'uploads/' });

app.post('/upload', upload.single('file'), (req, res) => {
  const file = req.file;
  const filePath = path.join(__dirname, file.path);

  // 处理文件上传，例如保存到磁盘或数据库

  res.sendStatus(200);
});

app.listen(3000, () => {
  console.log('服务器已启动');
});

在上面的代码中，我们使用multer中间件来处理文件上传。upload.single方法指定了接受一个名为file的文件字段。在处理函数中，我们可以使用req.file访问文件对象。

文件上传的其他功能和注意事项

上传多个文件

要上传多个文件，可以多次调用append方法或者在HTML表单中使用multiple属性：

<input type="file" name="files" multiple>

在服务器端，我们可以使用upload.array方法来处理多个文件字段：

app.post('/upload', upload.array('files'), (req, res) => {
  const files = req.files;

  // 处理文件上传

  res.sendStatus(200);
});

添加其他字段

除了文件之外，FormData对象还可以包含其他类型的字段。

要添加其他字段，只需调用append方法并传递字段名和值作为参数：

formData.append('name', 'John Doe');

在服务器端，我们可以使用req.body来访问这些字段的值。

限制文件类型和大小

有时候，我们可能希望限制文件的类型和大小。在multer中，我们可以使用fileFilter选项来实现。

下面的代码展示了如何只允许上传JPEG和PNG类型的文件，并限制文件大小不超过1MB：

const fileFilter = (req, file, cb) => {
  const allowedMimeTypes = ['image/jpeg', 'image/png'];
  const maxSize = 1 * 1024 * 1024; // 1MB

  if (!allowedMimeTypes.includes(file.mimetype)) {
    cb(new Error('只能上传JPEG和PNG类型的文件'));
  } else if (file.size > maxSize) {
    cb(new Error('文件大小超过了1MB'));
  } else {
    cb(null, true);
  }
};

const upload = multer({ dest: 'uploads/', fileFilter });

app.post('/upload', upload.single('file'), (req, res) => {
  const file = req.file;

  // 处理文件上传

  res.sendStatus(200);
});

在上面的代码中，我们创建了一个名为fileFilter的函数来过滤文件。我们首先定义了一个数组来存放允许的MIME类型。然后，我们定义了最大文件大小为1MB。接着，我们在multer的配置中使用了fileFilter函数来限制文件类型和大小。