express + multer 文件上传入门
写在前面的
在web开发中,我们经常会遇到图片上传的功能,接下来我们就在express4.15.0框架中利用multer1.3.0模块来实现图片上传
开始敲代码
首先利用express-generator express框架生成器生成我们的项目
这里我们采用ejs模板引擎(因为我只会这个)
express -e uploads
创建好之后,目录结构如下图所示:
然后开始安装依赖并且运行
cd uploads
cnpm install
npm start
用谷歌浏览器打开http://localhost:3000,出现下图。至此,我们的express框架已经搭建完成
接下来,安装multe中间件,并且将依赖写入package.json
cnpm install multer --save
打开package.json,我们惊奇的发现多了一行
至此,我们终于搭建好环境了,正式开始编程
我们首先写一个表单提交路由
在routes文件下的index.js中,添加一个路由
router.get('/upload', function(req, res, next) {
res.render('upload', { title: '图片上传' });
});
接下来写一个相对应的表单提交页面
注意!提交方式必须是post,同时添加属性enctype="multipart/form-data"
要不然,http协议的头信息是不对的,关于这点,可以参考这里
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1><%= title %></h1>
<form action="doup" method="post" enctype="multipart/form-data">
<p>
<label for="img">图片上传:</label>
<input type="file" value="选择图片" id="img" name="image">
</p>
<p>
<input type="submit" value="提交">
</p>
</form>
</body>
</html>
运行程序,结果如下图
很幸运,程序正常运行
接下来,我们需要修改app.js,引入multer模块
var multer = require('multer');
在相应的位置上添加下面语句
//将上传上来的image文件放到项目的tmp文件夹下面
//!!!特别注意:这句话必须放在
//app.use('/', index);
//app.use('/users', users);
//这两句的前面,否则后面会失败的
app.use(multer({dest: './tmp/'}).array('image'));
运行程序之后,我们又可以惊奇的发现项目中多了一个文件夹
在浏览器上传文件后,打开tmp文件夹,发现里面的多了一个文件,名字是一串乱七八糟的东西,
很懊恼,这明明不是我上传的jpg图片呀
不要着急,这里我们把文件的名字改一下
名字随便写,后缀是你上传的后缀就可以,我上传的是jpg格式的图片,
很神奇的事情发生了
我们发现这不就是我们上传的文件吗,可是难道我们必须手动更改吗
不要忘了nodejs很轻易就可以对本地文件进行操作
利用fs模块可以轻松实现这点
在routers中的index.js我们接着更改
引入fs模块
var fs = require('fs');
添加post提交路由
router.post('/doup', function (req,res,next){
var files = req.files;
var oldPath = files[0].destination + files[0].filename;
var newPath = './public/uploads/' + files[0].originalname;
console.log(newPath);
fs.rename(oldPath, newPath, function (err) {
if (err) {
throw err;
}
res.send('success');
});
})
运行程序,上传图片,发现图片正常上传
至此,我们的上传图片已经大功告成!
express + multer 文件上传入门的更多相关文章
- Express multer 文件上传
npm multer 文件上传 Express app 范本就不写了,仅记录一下上传部分的代码. const fs = require('fs'); const express = require(' ...
- node+express实现文件上传功能
在进行node web开发时,我们可能经常遇到上传文件的问题,这一块如果我们没有经验,可能会遇到很多坑,下面我将跟大家分享一下,实现文件上传的一些方式. 一.node+express文件上传的常用方式 ...
- node express formidable 文件上传后修改文件名
//我是用php的思想来学习nodejs var express = require('express'); var router = express.Router(); var fs = requi ...
- Vue+axios+Node+express实现文件上传(用户头像上传)
Vue 页面的代码 <label for='my_file' class="theme-color"> <mu-icon left value="bac ...
- koa2的文件上传
使用koa2搭建文件上传服务,后端代码 const os = require('os'); const path = require('path'); const koaBody = require( ...
- Nodejs进阶:基于express+multer的文件上传
关于作者 程序猿小卡,前腾讯IMWEB团队成员,阿里云栖社区专家博主.欢迎加入 Express前端交流群(197339705). 正在填坑:<Nodejs学习笔记> / <Expre ...
- node.js中 express + multer 处理文件上传
multer中间件,可以很方便的结合express处理用户表单上传的文件. 一.安装multer npm install multer 二.处理单个文件上传 const express = requi ...
- express文件上传中间件Multer详解
express文件上传中间件Multer详解 转载自:https://www.cnblogs.com/chengdabelief/p/6580874.html Express默认并不处理HTTP请 ...
- Express文件上传之Multer
Express文件上传之Multer Multer是一个nodejs中间件,用来处理http提交multipart/form-data,也就是文件上传.它是在busboy的基础上开发的. 在我看来,M ...
随机推荐
- Android TabLayout+ViewPager禁止滑动
1.重写ViewPager并重写覆盖ViewPager的onInterceptTouchEvent(MotionEvent arg0)方法和onTouchEvent(MotionEvent arg0) ...
- 关于layui.laypage.render 刷新首页没有分页问题
前言: 最近写项目遇到一个问题,就是使用vue里的layui.laypage.render 分页时,刷新首页会只有一页,但后台传来的数据是有50多页的,所有的数据也都一一对应,调了好久debug,终于 ...
- NTP同步底层实现
RFC http://www.ietf.org/rfc/rfc5905.txt https://www.eecis.udel.edu/~mills/ntp/html/select.html https ...
- iOS开发——自动填充短信验证码
苹果在iOS 12,改进了一个很人性化的小细节.在做短信验证码功能的时候,自动获取短信中的验证码,然后点击填充即可.不用再向之前那样麻烦,自己看到弹出的短信信息后,死记硬背,再一个个敲上去,害怕背错了 ...
- sort函数用法详解
用于C++中,对给定区间所有元素进行排序.头文件是#include <algorithm> sort函数进行快速排序,时间复杂度为n*log2n,比冒泡之类的要省时不少 Sort函数使用模 ...
- [HDU1195]Open the Lock
题目大意:给你一个4位数的初始状态(只包含1~9),要求你变化成另一个4位数. 变化规则为:每次可给任意一位加1或减1(1减1变为9,9加1变为1),或交换相邻两个数位上的数字(第一位和最后一位不相邻 ...
- MHA 主从切换过程及日志分析
本文主要在MHA 切换日志的角度分析MHA切换的过.MHA故障切换过程如下图所示 第一部分:开启MHA 监控 通过分析日志,得到以下步骤: 1.读取MHA manager 节点的配置文件,并检查配置文 ...
- debian 9 添加源
1.将下面内容的添加入/etc/apt/sources.list(香港镜像) #For software deb http://mirrors.ustc.edu.cn/debian/ stretch ...
- 监控iis计数器
- Mysql数据库事务的隔离级别和锁的实现原理分析
Mysql数据库事务的隔离级别和锁的实现原理分析 找到大神了:http://blog.csdn.net/tangkund3218/article/details/51753243 InnoDB使用MV ...