1.简介
multer是一个node.js文件上传中间件,它是在 busboy的基础上开发的!
multer必须指定 enctype="multipart/form-data".
2.安装
npm install multer -save
3.使用
1.建立项目
新建一个express项目multer (如何建立请看前面章节) 安装好所有依赖模块 . (注意 我们最好不要用模块名称作为项目名,因为会使我们该模块安装失败)<span style="color:#333333;">E:\nodeTest\multer>npm install multer -savenpm WARN install Refusing to install multer as a dependency of itself</span>
解决方法:修改package.json 里面的name (随便改,我改成multer-test)
2.建立视图页面
建立一个form表单,注意别忘记设置enctype。 写一个if语句,如果存在image则显示这个image,否则显示表单。 注意,不能直接写if(image){}else{} 因为会报错:image is not defined。我们需要通过 typeof 来检测image是否被定义并且存在。
//index.ejs<!DOCTYPE html><html><head><title><%= title %></title><link rel='stylesheet' href='/stylesheets/style.css' /></head><body><h1><%= title %></h1><p>Welcome to <%= title %></p><% if(typeof(image) !== 'undefined' && image){ %><img src="<%=image%>"><%}else{%> <form action="/upload" enctype="multipart/form-data" method="POST"><input type="file" name="image"><input type="submit" value="上传"></form> <%}%></body></html>
3.建立路由
接下来我们在路由里面写上传逻辑: 我们加载multer模块 ,并且设置保存路径(如果不设置则文件会保存在内存中,永远不会存入磁盘). 我们在项目根目录新建文件夹uploads(与public同级),该文件夹就为我们的上传路径.//index.jsvar express = require('express');var router = express.Router();var multer = require('multer')//设置保存路径var upload = multer({ dest: 'uploads/' })/* GET home page. */router.get('/', function(req, res, next) {res.render('index', { title: 'Express' });});router.post('/upload', upload.single("image"), function(req, res, next) {//文件路径var image=req.file.path;res.render('index', { title : 'Express' ,image:image});});module.exports = router;
4.托管静态文件
我们选择文件,点击上传,会发现图片找不到。我们打开upload 发现图片已经上传上去了
查找下express api,发现静态文件访问是需要通过express.static()方法设置的 (API) 我们修改 app.js文件 找到该行代码(应该是23行)
app.use(express.static(path.join(__dirname, 'public')));
再添加一行代码 其中前面的uploads是一个挂载路径 如果不加 访问图片则为 localhost:3000/imageName ,加了之后则为 localhost:3000/uploads/imageName _dirname是当前项目的完整绝对路径. 我的为e:\nodeTest\multer
path.join(_dirname,'uploads‘) 则为 e:\nodeTest\multer\uploads
app.use('/uploads',express.static(path.join(__dirname, 'uploads')))
重启服务,重新上传图片。 成功啦!!! http://
5.multer多种上传
官方例子提供了多种种方法上传<pre name="code" class="javascript">//单个文件上传upload.single("image") //image为文件name//获得文件:req.file//多个相同name文件上传upload.array("image",maxCount) //image为多个相同文件name ,maxCount则为最大上传个数 ,也可以不设置//获得文件 req.files//多个不同name文件上传upload.fields([{name:'image',maxCount:'1'},{name:'txt',maxCount:'2'}])//name 则为上传文件name ,maxCount为该name文件最大上传个数 ,可以不设置//获得文件 req.files.image req.files.txt
multer还有许多功能,总体来说能满足我们日常需求,想详细了解请看API