node+express+ multer 实现文件上传入门
文件上传
文件上传需要借助一个中间件 multer
因此我们需要安装 cnpm install multer --save
前端界面
在express创建的项目下的 public/upload目录下创建 indexfileupload.html
如果你没有需要进行创建对应的文件
然后再地址栏输出 http://127.0.0.1:666/upload/indexfileupload.html
可以显示下下面对应的界面
indexfileupload.html
<!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>文件上传</title>
</head>
<body>
<form action="/upload/upload" method="post" enctype="multipart/form-data">
<input type="file" name="logo2"> <br />
<input type="submit" value="文件上传">
</form>
</body>
</html>
indexfileupload.html文件的注意点
1===》action="/upload/upload" 表示的是接口地址。
因为这里前后端没有分离，因此不需要写最前面的地址
2==》method="post" 表示的是请求的方式
3==》enctype="multipart/form-data" 文件上传的固定格式
4==》<input type="file" name="logo2"> 中的file表示文件。
name="logo2" 需要与 后端的 upload.single('name') 与之对应
router.post('/upload', upload.single('logo2'), (req,res) => {
var file = req.file
res.send({ code:'0', msg:'上传成功'})
})
后端代码-在routes目录下创建 fileupload.js文件
var express = require('express')
var router = express.Router()
// 引入文件模块
var fs = require('fs')
// 引入路径模块
var path = require('path')
// 后端处理文件的模块
var multer=require('multer')
// 配置路径和文件名
var storage = multer.diskStorage({
//上传文件到服务器的存储位置
destination: 'public/upload',
filename: function (req, file, callback) {
console.log('file', file) //上传的文件信息
var fileFormat = (file.originalname).split('.')
var filename = new Date().getTime()
callback(null, filename+"."+fileFormat[fileFormat.length-1])
}
})
var upload = multer({
storage
})
//接口
router.post('/upload', upload.single('logo2'), (req,res) => {
var file = req.file
res.send({ code:'0', msg:'上传成功'})
})
//导出
module.exports = router;
在app.js中注册使用路由
// 引入
var uploadRouter = require('./routes/fileupload');
//使用
app.use('/upload', uploadRouter);
在浏览器中输入http://127.0.0.1:666/upload/indexfileupload.html
然后选择对应的文件，然后点击文件上传按钮，就可以实现文件上传成功了
遇见问题，这是你成长的机会，如果你能够解决，这就是收获。
作者：晚来南风晚相识
出处：https://www.cnblogs.com/IwishIcould/
本文版权归作者所有，欢迎转载，未经作者同意须保留此段声明，在文章页面明显位置给出原文连接
如果文中有什么错误，欢迎指出。以免更多的人被误导。
出处：https://www.cnblogs.com/IwishIcould/
想问问题，打赏了卑微的博主，求求你备注一下的扣扣或者微信；这样我好联系你；(っ•̀ω•́)っ✎⁾⁾！
如果觉得这篇文章对你有小小的帮助的话，记得在右下角点个“推荐”哦，或者关注博主，在此感谢！
万水千山总是情，打赏5毛买辣条行不行，所以如果你心情还比较高兴，也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾！
想问问题，打赏了卑微的博主，求求你备注一下的扣扣或者微信；这样我好联系你；(っ•̀ω•́)っ✎⁾⁾！
支付宝
微信
如果文中有什么错误，欢迎指出。以免更多的人被误导。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 单线程的Redis速度为什么快？
· 展开说说关于C#中ORM框架的用法！
· Pantheons：用 TypeScript 打造主流大模型对话的一站式集成库
· SQL Server 2025 AI相关能力初探
· 为什么 退出登录 或 修改密码 无法使 token 失效