Express 文件上传 Multer - JavaScript 编程网

在Express.js中处理文件上传，通常需要借助第三方中间件，如multer，它是一个Node.js的中间件，用于处理multipart/form-data类型的HTTP请求，主要用于文件上传。

以下是如何使用multer在Express.js应用中实现文件上传的基本步骤：

1. 安装multer

首先，你需要安装multer。可以通过npm或yarn来安装：

Bash

npm install multer
# 或者
yarn add multer

2. 导入并配置multer

在你的Express应用中导入multer，然后根据需求配置存储引擎。multer提供了内存存储和磁盘存储两种方式，默认是内存存储，适合小文件。对于大文件或者希望持久化存储的场景，建议使用磁盘存储。

简单示例（内存存储，适用于小文件）:

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

const app = express();

// 使用内存存储
const upload = multer();

app.post('/upload', upload.single('file'), (req, res) => {
  if (!req.file) {
    return res.status(400).send('No file uploaded.');
  }
  res.send(`File received: ${req.file.originalname}`);
});

app.listen(3000, () => console.log('Server started on port 3000'));

磁盘存储示例:

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

const app = express();

// 配置multer的磁盘存储引擎
conststorage = multer.diskStorage({
 destination: function (req, file, cb) {
    cb(null, 'uploads/') // 指定上传文件存放的目录
  },
  filename: function (req, file, cb) {
    cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname)) 
    // 生成文件名
  }
})

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

app.post('/upload', upload.single('file'), (req, res) => {
  if (!req.file) {
    return res.status(400).send('No file uploaded.');
  }
  res.send(`File uploaded successfully: ${req.file.filename}`);
});

app.listen(3000, () => console.log('Server started on port 3000'));

3. 创建上传表单

前端需要使用enctype="multipart/form-data"的表单来提交文件。例如：

Html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>File Upload</title>
</head>
<body>
    <form action="/upload" method="post" enctype="multipart/form-data">
        <input type="file" name="file">
        <button type="submit">Upload</button>
    </form>
</body>
</html>

注意事项

确保你已经正确设置了静态文件目录或处理静态资源的路由，以便能访问到上传的文件（如果需要展示的话）。
考虑到安全性，对上传的文件类型、大小等进行限制是非常重要的，可以使用multer的fileFilter和limits选项来实现。
处理文件上传时，考虑错误处理机制，比如文件过大、类型不符等情况的响应。

通过以上步骤，你就可以在Express.js应用中实现基本的文件上传功能了。

修改时间 2024-05-29

声明：本站所有文章和图片，如无特殊说明，均为原创发布。商业转载请联系作者获得授权，非商业转载请注明出处。