100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > node.js学习笔记(8)--multer模块文件上传

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

时间:2024-03-24 09:47:07

相关推荐

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

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

4.其他

由于之前项目的multer版本是0.1.8版本的 而刚刚新建的是1.1.0版本的 两者在写法上是有很大的不同的(被坑死了) 所以,如果报错了看看是不是版本问题!!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。