阅读提示：本文共计约11194个文字，预计阅读时间需要大约31分钟，由作者VIP的意思编辑整理创作于2023年11月06日00时31分37秒。
在 Node.js、Express 和 Multer 的框架下，我们可以轻松实现文件的上传功能。当用户在前端上传图片后，服务器会接收并存储图片文件。接下来，前端需要获取到图片的 URL 地址才能进行展示。以下是一个简单的示例，说明如何实现这个功能。
- 安装依赖
确保你已经安装了 Node.js 和 npm。然后，通过以下命令安装 Express 和 Multer：
npm install express multer
- 创建文件夹和文件
在项目目录下创建以下文件夹和文件：
app.jspublic（存放静态资源）views（存放模板文件）
- 配置 Express
在 app.js 中配置 Express：
const express = require('express');
const multer = require('multer');
const app = express();
// 设置模板引擎
app.set('view engine', 'pug');
// 设置静态资源目录
app.use(express.static('public'));
// 设置文件存储位置
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'uploads/');
},
filename: function (req, file, cb) {
cb(null, Date.now() '-' file.originalname);
}
});
// 设置文件过滤器
const fileFilter = (req, file, cb) => {
// 只允许上传图片文件
if (file.mimetype === 'image/jpeg' || file.mimetype === 'image/png') {
cb(null, true);
} else {
cb(null, false);
}
};
// 初始化Multer
const upload = multer({
storage: storage,
limits: {
fileSize: 1024 * 1024 * 5 // 限制文件大小为 5MB
},
fileFilter: fileFilter
});
// 路由处理
app.post('/upload', upload.single('file'), (req, res) => {
res.send('文件上传成功！');
});
// 监听端口
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
- 编写模板文件
在 views 文件夹下创建 index.pug 文件：
doctype html
html
head
title File Upload Example
script.
var fileUrl = '{{fileUrl}}';
body
h1 File Upload Example
form(method='POST', enctype='multipart/form-data')
input(type='file', name='file', accept='image/*')
input(type='submit', value='Upload Image')
img(src=fileUrl, alt='Uploaded Image')
- 前端展示
在 HTML 文件中引入 Pug 编译后的 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 Example</title>
<script src="https://unpkg.com/pug-cli/dist/pug.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<h1 id="message"></h1>
<div id="app"></div>
<script>
const message = document.getElementById('message');
const app = document.getElementById('app');
app.render(document.getElementById('app'), { <365>fileUrl: '' });
window.onload = function() {
const fileInput = document.querySelector('input[type="file"]');
const submitButton = document.querySelector('input[type="submit"]');
fileInput.addEventListener('change', function() {
submitButton.click();
});
submitButton.addEventListener('click', function(e) {
e.preventDefault();
const file = fileInput.files[0];
fetch('/upload', {
method: 'POST',
body: new FormData(fileInput.form)
})
.then(response => response.json())
.then(data => {
message.textContent = data.message;
app.render(document.getElementById('app'), { fileUrl: data.fileUrl });
});
});
};
</script>
</body>
</html>
现在，你可以运行 node app.js 启动服务器，然后在浏览器中打开 HTML 文件。选择一张图片并点击 "Upload Image"，你将看到上传成功的提示以及上传的图片。
