此文为实现一个以nodejs为基础，简单的图片上传功能的小demo，做记录，供参考！
安装
安装四个插件express multer ejs path
npm install express multer ejs path
构建启动服务器
// 引入模块const express = require('express')const multer = require('multer')const ejs = require('ejs')const path = require('path')// 初始化appconst app = express()// 引用ejs 模板app.set('view engine', 'ejs')// 配置静态资源 public文件夹中app.use(express.static('./public'))// 请求接口app.get('/', (req, res) => {//渲染到 index.ejsres.render('index')})// 监听 3000端口app.listen(3000)
新建views 文件夹，创建index.ejs
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="/ajax/libs/materialize/0.97.8/css/materialize.min.css"><title>图片上传</title></head><body><div class="container"><h1>上传图片文件</h1><!-- 请求接口 /upload --><form action="/upload" method="POST" enctype="multipart/form-data"><div ><div class="btn grey"><span>选择图片</span><input type="file" name="myImage"></div><div class="file-path-wrapper"><input type="text"></div></div><button type="submit">确认提交</button></form><br></div></body></html>
好啦~打开 本地3000端口， 查看是否能开始（我相信你， 可以的）
根目录创建public，在里面新建my-uploads文件夹，用于存放上传上来的图片，下面进入正题了，可在multer中文官网查看正文。
从上图进行修改成下面代码
// index.js// 磁盘存储引擎var storage = multer.diskStorage({// 最终的存放地址destination: function (req, file, cb) {cb(null, './public/my-uploads/')},// 文件最终的命名filename: function (req, file, cb) {// 文件名 + ‘-’ + 时间戳 + 文件后缀名cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname))}})// 初始化uploadconst upload = multer({storage:storage,// 配置fileFilter:function(req, file, cb){// 限制文件函数checkFileType(file, cb);// 判断是否满足文件类型},limits:{fileSize:1000000}// 限制文件大小}).single('myImage');// 验证文件类型function checkFileType(file, cb){// 允许的文件扩展名格式const filetypes = /jpeg|jpg|png|gif/;// 验证扩展名const extname = filetypes.test(path.extname(file.originalname).toLowerCase());// 验证MIMEconst mimetype = filetypes.test(file.mimetype);if(mimetype && extname){return cb(null, true);}else{cb('错误：只支持图片格式！')}}
下面再进行 /uploads 的请求
app.post('/upload', (req, res) => {upload(req, res, (err) => {if(err){res.render('index', {msg:err});}else{// console.log(req.file)// res.send('test');if(req.file === undefined){res.render('index',{msg:'错误：请选择上传文件！'})}else{res.render('index',{msg:'文件已上传成功！',file:`my-uploads/${req.file.filename}`})}}})})
为了提高用户体验，在提交错误文件或其他报错，在ejs模板添加，错误返回，并且添加若上传成功，展示图片，完成的ejs如下代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="/ajax/libs/materialize/0.97.8/css/materialize.min.css"><title>图片上传</title></head><body><div class="container"><h1>上传图片文件</h1><%= typeof msg != 'undefined' ? msg : ''%><form action="/upload" method="POST" enctype="multipart/form-data"><div ><div class="btn grey"><span>选择图片</span><input type="file" name="myImage"></div><div class="file-path-wrapper"><input type="text"></div></div><button type="submit">确认提交</button></form><br><img src=" <%= typeof file != 'undefined' ? file : ''%>" alt="" class="responsive-img"></div></body></html>
完整的后端请求代码如下：
const express = require('express')const multer = require('multer')const ejs = require('ejs')const path = require('path')const app = express()// 磁盘存储引擎var storage = multer.diskStorage({// 最终的存放地址destination: function (req, file, cb) {cb(null, './public/my-uploads/')},// 文件最终的命名filename: function (req, file, cb) {// 文件名 + ‘-’ + 时间戳 + 文件后缀名cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname))}})// 初始化uploadconst upload = multer({storage:storage,// 配置fileFilter:function(req, file, cb){// 限制文件函数checkFileType(file, cb);// 判断是否满足文件类型},limits:{fileSize:1000000}// 限制文件大小}).single('myImage');// 验证文件类型function checkFileType(file, cb){// 允许的文件扩展名格式const filetypes = /jpeg|jpg|png|gif/;// 验证扩展名const extname = filetypes.test(path.extname(file.originalname).toLowerCase());// 验证MIMEconst mimetype = filetypes.test(file.mimetype);if(mimetype && extname){return cb(null, true);}else{cb('错误：只支持图片格式！')}}app.set('view engine', 'ejs')app.use(express.static('./public'))app.get('/', (req, res) => {res.render('index')})app.post('/upload', (req, res) => {upload(req, res, (err) => {if(err){res.render('index', {msg:err});}else{// console.log(req.file)// res.send('test');if(req.file === undefined){res.render('index',{msg:'错误：请选择上传文件！'})}else{res.render('index',{msg:'文件已上传成功！',file:`my-uploads/${req.file.filename}`})}}})})app.listen(3000)
样式展示
至此，图片上传小demo完成，仅供参考，多多学习~~
