Node.js 中的文件上传

2025年2月26日 | 4 分钟阅读

在 Node.js 中上传文件可以通过使用中间件和各种包以多种方式完成。用于此过程的一些模块是 'multer'、'formidable'、'multiparty'、'busboy' 等。本文将讨论如何使用不同的模块在 Node.js 中上传文件。

1. 在 node.js 中使用 multer 模块

使用 multer 模块的步骤

首先，我们创建一个名为 upload_file 的文件夹，并使用 'npm init' 初始化 package.js 文件。
之后，使用命令 npm 安装 express multer 模块。
接下来，在 upload_file 文件夹中创建一个 public 文件夹，并在 public 文件夹中创建一个 index.html 文件。
现在，在主文件夹中创建一个 server.js 文件。
使用命令 "node server.js" 运行应用程序。

Index.html

 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>File Upload</title>
</head>
<body>
  <h1>Upload a File</h1>
  <form ref="uploadForm" id="uploadForm" action="/upload" method="post" encType="multipart/form-data">
    <input type="file" name="myFile" />
    <input type="submit" value="Upload File" />
  </form>
</body>
</html>   

Server.js

 
const express = require('express');
const multer = require('multer');
const path = require('path');
const app = express();
const PORT = 3000;
const storage = multer.diskStorage({
  destination: './uploads/',
  filename: function(req, file, cb) {
    cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname));
  }
});
const upload = multer({
  storage: storage,
  limits: { fileSize: 1000000 },
  fileFilter: function(req, file, cb) {
    checkFileType(file, cb);
  }
}).single('myFile'); 
function checkFileType(file, cb) {
  const filetypes = /jpeg|jpg|png|gif/;
  const extname = filetypes.test(path.extname(file.originalname).toLowerCase());
  const mimetype = filetypes.test(file.mimetype);
  if (mimetype && extname) {
    return cb(null, true);
  } else {
    cb('Error: Images Only!');
  }
}
app.use(express.static('./public'));
app.post('/upload', (req, res) => {
  upload(req, res, (err) => {
    if (err) {
      res.status(400).send(err);
    } else {
      if (req.file == undefined) {
        res.status(400).send('Error: No File Selected!');
      } else {
        res.send(`File uploaded! <a href="/uploads/${req.file.filename}">View File</a>`);
      }
    }
  });
});
app.listen(PORT, () => console.log(`Server started on port ${PORT}`));   

输出

表单提交后

说明

在此示例中，导入所有必要的包，例如 express、multer 和 path，以处理文件上传及其命名。之后，为 multer 设置存储引擎，其中目标应为存储上传文件的文件夹，文件名应通过添加存储在目标文件夹中的原始文件名的日期和类型来更改。上传变量应使用文件限制进行初始化。之后，应检查文件类型。

在上述程序中，只存储类型为“jpeg”、“jpg”、“png”或“gif”的图像文件。如果文件是其他类型，将返回错误消息。之后，编写路由以处理文件上传的 POST 请求。如果文件有效，则正确上传；否则，显示错误消息。此服务器正在给定端口上运行。

界面使用“HTML”编写，其中包含一个表单，其中包含一个输入字段用于获取文件作为输入，以及一个用于提交文件以上传的按钮。

2. 在 Node.js 中使用 multiparty 库

使用 multiparty 模块的步骤

首先，我们创建一个名为 upload_file 的文件夹，并使用 'npm init' 初始化 package.js 文件。
之后，使用命令 'npm install express multiparty' 安装模块。
接下来，在 upload_file 文件夹中创建一个 public 文件夹，然后在 public 文件夹中创建一个 index.html 文件。
现在，在主文件夹中创建一个 server.js 文件。
使用命令 "node server.js" 运行应用程序。

Index.js

 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>File Upload</title>
</head>
<body>
  <h1>Upload a File</h1>
  <form ref="uploadForm" 
        id="uploadForm" 
        action="https://:3000/upload" 
        method="post" 
        encType="multipart/form-data">
    <input type="file" name="myFile" />
    <input type="submit" value="Upload File" />
  </form>
</body>
</html>   

Server.js

 
const express = require('express');
const multiparty = require('multiparty');
const fs = require('fs');
const path = require('path');
const app = express();
const PORT = 3000;
app.use(express.static('./public'));
app.post('/upload', (req, res) => {
  const form = new multiparty.Form({ uploadDir: './uploads' });
  form.parse(req, (err, fields, files) => {
    if (err) {
      res.status(400).send('Error parsing form');
      return;
    }
    const file = files.myFile[0];
    const oldPath = file.path;
    const newPath = path.join('uploads', file.originalFilename);
    fs.rename(oldPath, newPath, (err) => {
      if (err) {
        res.status(400).send('Error renaming file');
        return;
      }
      res.status(200).send(`File uploaded! <a href="/uploads/${file.originalFilename}">View File</a>`);
    });
  });
});
app.listen(PORT, () => console.log(`Server started on port ${PORT}`));   

输出

文件上传界面

终端输出

说明

在此示例中，服务器程序通过导入所有必要的模块开始。之后，使用 express 创建一个 Web 浏览器，该浏览器应在 3000 端口上运行。接下来，将服务器配置为在 public 文件夹中提供静态文件。编写一个上传端点以侦听 POST 请求以上传文件。之后，解析传入请求以从字段中提取并上传文件，然后设置 multiparty 来处理上传。

文件处理是在将文件从临时位置上传到 uploads 文件夹之前完成的。成功上传后，应向客户端发送一条成功消息，其中包含查看上传文件的链接。

下一主题如何在 Node.js 中计算本地时间

Node.js 中的文件上传

1. 在 node.js 中使用 multer 模块

Index.html

Server.js

说明

2. 在 Node.js 中使用 multiparty 库

使用 multiparty 模块的步骤

Index.js

Server.js

说明

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Node.js 教程

Node.js MySQL

Node.js MongoDB

区别

其他

Node.js 选择题

Node.js Express

面试题

Node.js 中的文件上传

1. 在 node.js 中使用 multer 模块

Index.html

Server.js

说明

2. 在 Node.js 中使用 multiparty 库

使用 multiparty 模块的步骤

Index.js

Server.js

说明

相关帖子

Node.js 中的领域驱动设计

Node.js os.endianness() 方法

Node.js 最佳数据库

Node.js, Ajax, 和 jQuery 的区别

Node.js Stream writable.destroy() 方法

Node.js 中的 os.arch() 函数

Node.js 中的 http.ServerResponse.addTrailers() 函数

Node.js diffieHellman.computeSecret() 方法

Node.js process.report.reportOnUncaughtException 属性

Node.js 中的 Error-First Callback

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器