node.js学习笔记(8)--multer模块文件上传

1.简介

multer是一个node.js文件上传中间件，它是在 busboy的基础上开发的!

multer必须指定 enctype="multipart/form-data".

2.安装

npm install multer -save

3.使用

1.建立项目

新建一个express项目 multer (如何建立请看前面章节) 安装好所有依赖模块 .

（注意 我们最好不要用模块名称作为项目名，因为会使我们该模块安装失败）

E:\nodeTest\multer>npm install multer -save
npm WARN install Refusing to install multer as a dependency of itself

解决方法：修改package.json 里面的name (随便改，我改成multer-test)

2.建立视图页面

建立一个form表单，注意别忘记 设置enctype。

写一个if语句，如果存在image则显示这个image,否则显示表单。

注意，不能直接写if(image){}else{} 因为会报错：image is not defined。

我们需要通过 typeof 来检测image是否被定义并且存在。

//index.ejs


  
    
    
  
  
    
<%= title %>
    
Welcome to <%= title %>

    <% if(typeof(image) !== 'undefined' && image){ %>
      
    <%}else{%> 
    

      
      
    
 
    <%}%>
  

3.建立路由

接下来我们在路由里面写上传逻辑:

我们加载multer模块 ，并且设置保存路径( 如果不设置则文件会保存在内存中，永远不会存入磁盘).

我们在项目根目录新建文件夹uploads(与public同级)，该文件夹就为我们的上传路径.

//index.js
var 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多种上传

官方例子提供了多种种方法上传

//单个文件上传
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 
   

4.其他

由于之前项目的multer版本是0.1.8版本的 而刚刚新建的是1.1.0版本的 两者在写法上是有很大的不同的（被坑死了）

所以，如果报错了看看是不是版本问题！！