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

最新推荐文章于 2024-03-21 05:15:00 发布

mnixu

最新推荐文章于 2024-03-21 05:15:00 发布

阅读量1.3w

点赞数 2

分类专栏： node.js node-js 文章标签： node.js express

本文链接：https://blog.csdn.net/a1104258464/article/details/51697691

版权

node.js 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

node-js

14 篇文章 5 订阅

订阅专栏

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 -save
npm 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.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多种上传

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

<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