Express + Multer + CORS + HTTP-Server：文件上传的终极解决方案

用 Express、Multer、CORS 和 HTTP-Server 实现文件上传

简介

文件上传是许多 Web 应用程序的核心功能。无论您是构建电子商务网站、社交媒体平台还是简单的博客，您都需要一种方法来允许用户上传图像、视频、文档和其他文件。本文将引导您使用 Express、Multer、CORS 和 HTTP-Server 轻松实现这一功能。

安装依赖项

首先，您需要安装以下依赖项：

• Express
• Multer
• CORS
• HTTP-Server

使用以下命令安装它们：

npm install express multer cors http-server

配置服务器

安装依赖项后，您需要配置服务器。为此，您需要创建新的 Express 应用程序并配置 Multer。

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

const app = express();

// 配置 Multer
const storage = multer.diskStorage({
  destination: './uploads/',
  filename: (req, file, cb) => {
    cb(null, file.originalname);
  }
});

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

// 配置 CORS
app.use(cors());

// 配置 HTTP Server
const server = httpServer.createServer(app);

// 启动服务器
server.listen(3000);

处理文件上传

配置服务器后，您就可以处理文件上传了。为此，您需要创建一个新的路由并使用 Multer 的 single() 方法。

app.post('/upload', upload.single('file'), (req, res) => {
  res.send('File uploaded successfully!');
});

这将允许用户上传单个文件。如果您想允许用户上传多个文件，您可以使用 array() 方法。

app.post('/upload', upload.array('files', 10), (req, res) => {
  res.send('Files uploaded successfully!');
});

测试文件上传

现在您已经设置了文件上传，您可以测试它了。为此，您可以使用以下命令：

curl -X POST -F "file=@file.txt" http://localhost:3000/upload

这将上传名为 "file.txt" 的文件到服务器。

结论

使用 Express、Multer、CORS 和 HTTP-Server，您可以轻松实现文件上传功能。本文引导您完成了整个过程，从安装依赖项到配置服务器。

常见问题解答

1. 如何限制文件大小？

您可以使用 Multer 的 limits 选项来限制文件大小。例如，要限制文件大小为 1MB，您可以使用以下代码：

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

const upload = multer({ storage: storage, limits: { fileSize: 1000000 } });

2. 如何上传到特定目录？

您可以使用 Multer 的 destination 选项来指定要上传文件的目录。例如，要上传到 uploads/images 目录，您可以使用以下代码：

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

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

3. 如何处理文件类型？

您可以使用 Multer 的 fileFilter 选项来处理文件类型。例如，要限制上传图像文件，您可以使用以下代码：

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

const fileFilter = (req, file, cb) => {
  if (file.mimetype.startsWith('image/')) {
    cb(null, true);
  } else {
    cb(new Error('Only image files are allowed!'), false);
  }
};

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

4. 如何使用云存储服务？

您可以使用 Multer 的云存储服务适配器将文件上传到云存储服务（如 AWS S3 或 Google Cloud Storage）。例如，要上传到 AWS S3，您可以使用以下代码：

const multerS3 = require('multer-s3');

const s3 = new AWS.S3({
  accessKeyId: 'YOUR_ACCESS_KEY_ID',
  secretAccessKey: 'YOUR_SECRET_ACCESS_KEY',
  region: 'YOUR_REGION',
});

const upload = multer({
  storage: multerS3({
    s3: s3,
    bucket: 'YOUR_BUCKET_NAME',
    acl: 'public-read',
    key: (req, file, cb) => {
      cb(null, `my-folder/${file.originalname}`);
    }
  })
});

5. 如何自定义上传文件名？

您可以使用 Multer 的 filename 选项来自定义上传文件名。例如，要将文件名更改为当前时间戳，您可以使用以下代码：

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

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