在实际的生产中我们经常需要上传头像等文件的操作，这时候我们可以选择使用 multer 这个中间件来解决这个问题，下面用上传头像的常见业务来解释 multer 中间件的用法。
效果
最终的效果是我们在前端通过选择本地的一个文件，然后上传即可，在后端我们规定好的文件夹中我们就可以看到上传的图片，然后执行我们的后续操作。
代码部分
首先添加相关的库：
pnpm add express multer
前端代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>demo about multer</title>
</head>
<body>
<form action="http://localhost:9009/addImg" method="post" enctype="multipart/form-data">
<input type="file" name="files" /> <br />
<input type="submit" value="上传" />
</form>
</body>
</html>
后端代码：
app.js
const express = require('express')
const multer = require('multer')
const upload = multer({
dest: './uploads',
})
const app = express()
const handler = require('./handler')
app.use('/', upload.single('files'), handler)
app.listen(9009, () => {
console.log('后端运行在 9009 端口')
})
handler.js
const express = require('express')
const router = express.Router()
const fs = require('fs')
router.post('/addImg', function (req, res) {
const oldFile = `${req.file.destination}/${req.file.filename}` //指定旧文件
const newFile = `${req.file.destination}/${req.file.originalname}` //指定新文件
console.log(req.file)
fs.rename(oldFile, newFile, function (err) {
if (err) {
res.send({
msg1: '上传失败！',
msg2: err.message,
})
} else {
res.send('上传成功！')
}
})
})
module.exports = router
340
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
