文件上传
文件上传需要借助一个中间件 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
然后选择对应的文件，然后点击文件上传按钮，就可以实现文件上传成功了
遇见问题，这是你成长的机会，如果你能够解决，这就是收获。
作者：晚来南风晚相识