Node文件上传，FormData转换，multipart/form-data图片上传

2023-11-10 10:50:02

无缝文件上传：使用 Node.js 处理文件上传和图像

在现代 Web 开发中，文件上传是一个至关重要的功能。无论是上传个人资料图片、提交文档还是处理大文件，都有必要提供一种便捷可靠的方法来处理这些操作。这就是 Node.js 闪亮登场的时候了。

使用 Node.js，您可以轻松实现文件上传。凭借其强大的模块生态系统，您可以找到许多专门的工具来处理此任务。其中，multer 脱颖而出，作为处理文件上传的最流行且强大的中间件之一。

multer：文件上传的简单解决方案

multer 是一个 Node.js 中间件，专为处理文件上传而设计。它提供了一个简单易用的 API，可让您自定义上传过程的各个方面。

要使用 multer，您需要做的第一件事是定义文件存储方式。 multer 提供了几种存储选项，包括本地文件系统、云存储服务（如 AWS S3）和数据库。为了本教程的目的，我们将使用 multer.diskStorage() 来将文件存储在本地文件系统中。

const multer = require('multer');

const storage = multer.diskStorage({
  destination: './uploads/',
  filename: (req, file, cb) => {
    cb(null, Date.now() + '-' + file.originalname);
  }
});

const upload = multer({ storage: storage });

在这里，我们创建了一个 multer 实例，并为其配置了存储选项。我们指定文件将存储在名为“uploads”的目录中，文件名将由当前时间戳和原始文件名组成。

接下来，我们使用 multer.single('file') 创建一个 multer 路由中间件。这将使您能够处理单个文件上传。

app.post('/upload', upload.single('file'), (req, res) => {
  // 获取上传的文件信息
  const file = req.file;

  // 将文件信息返回给前端
  res.json({
    file: file
  });
});

最后，您需要创建一个文件上传路由。当客户端向此路由发出 POST 请求时，multer 将自动处理文件上传并将其存储在您配置的目录中。

通过管道流储存图像

在某些情况下，您可能需要将图像存储为管道流。这是一种高效的方法，可以从一个流传输数据到另一个流。 multer 允许您通过其 file.stream 属性访问文件流。

const fs = require('fs');

// 创建一个文件流
const writeStream = fs.createWriteStream('./uploads/' + file.originalname);

// 将文件数据从管道流传输到文件流
file.stream.pipe(writeStream);

通过将文件数据从管道流传输到文件流，您可以有效地将图像存储在本地文件系统中。

获取 POST 请求参数

除了文件上传，Node.js 还允许您通过 req.body 属性访问 POST 请求的正文数据。这使您可以从客户端获取其他参数，例如用户名、密码或表单字段。

app.post('/upload', (req, res) => {
  // 获取body数据
  const body = req.body;

  // 获取参数
  const name = body.name;
  const age = body.age;

  // 将参数返回给前端
  res.json({
    name: name,
    age: age
  });
});

在前端使用 FormData

在前端，您可以使用 FormData 对象构建 multipart/form-data 请求，这是一种常见的用于文件上传的 HTTP 协议。

const formData = new FormData();

// 添加文件到FormData对象中
formData.append('file', file);

// 发送multipart/form-data请求
fetch('/upload', {
  method: 'POST',
  body: formData
});