Node.js 博客实例(三)添加文件上传功能
原教程
https://github.com/nswbmw/N-blog/wiki/_pages的第三章
上传文件眼下有三种方法:
使用 Express 自带的文件上传功能,不涉及数据库
使用 Formidable 外部模块,不涉及数据库
上传到 MongoDB ,涉及数据库
这里使用第一种,用户将文件上,存储于:blog/public/images/文件夹下。
blog/views/header.ejs 在<span><a title="发表" href="/post">post</a</span>前加入一行:
<span><a title="上传" href="/upload">upload</a</span>
index.js加入代码:
fs=require('fs'),
以及:
<span style="white-space:pre"> </span>app.get('/upload',checkLogin);
app.get('/upload',function(req,res){
res.render('upload',{
title:'文件上传',
user:req.session.user,
success:req.flash('success').toString(),
error:req.flash('error').toString()
});
});
app.post('/upload',checkLogin);
app.post('/upload',function(req,res){
for(var i in req.files){
if(req.files[i].size==0){
//使用同步方式删除一个文件
fs.unlinkSync(req.files[i].path);
console.log("successfully removed an empty file");
}else{
var target_path='./blog/public/images/'+req.files[i].name;
//使用同步方式重命名一个文件
fs.renameSync(req.files[i].path,target_path);
console.log('successfully rename a file');
}
}
req.flash('success','文件上传成功');
res.redirect('/upload');
});
blog/views/下新建upload.ejs:
<%- include header %>
<form method='post' action='/upload' enctype='multipart/form-data' >
<input type="file" name="file1" multiple="multiple" /><br>
<input type="file" name="file2" multiple="multiple" /><br>
<input type="file" name="file3" multiple="multiple" /><br>
<input type="file" name="file4" multiple="multiple" /><br>
<input type="file" name="file5" multiple="multiple" /><br>
<input type="submit" />
</form>
<%- include footer %>
blog/app.js中app.use(express.bodyParser());改为:
//保留上传文件的后缀名,并把上传文件夹设置为 /public/images
app.use(express.bodyParser({ keepExtensions: true, uploadDir: './blog/public/images' }));
此时我们上传一张图片:123.png
提交:
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZG9uZ3NoYW9zaHVhaQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
发表博客,在博客里引用照片:
发表:
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZG9uZ3NoYW9zaHVhaQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
Node.js 博客实例(三)添加文件上传功能的更多相关文章
- node.js系列(实例):原生node.js+formidable模块实现简单的文件上传
/** * 原生node.js结合formidable模块实现图片上传改名 * @Author:Ghost * @Date:2016/07/15 * @description: * 1.引入模块htt ...
- 【技术博客】Laravel5.1文件上传单元测试
Laravel5.1文件上传单元测试 作者:ZGJ 在软工第三阶段中,我彻底解决了上一阶段一直困扰我的文件上传单元测试问题,在这里做一个总结. 注:下文介绍中,方法一方法二实现简单但有一定的限制条件( ...
- 使用JS实现页面中动态添加文件上传输入项
1. 编写JSP <%@ page language="java" import="java.util.*" pageEncoding="UTF ...
- Node.js 博客实例(六)留言功能
原教程https://github.com/nswbmw/N-blog/wiki/_pages的第六章,因为版本号等的原因,在原教程基础上稍加修改就可以实现. 实现用户给文章留言的功能,留言保存在数据 ...
- Node.js 博客实例(一)简单博客
原教程 https://github.com/nswbmw/N-blog/wiki/_pages的第一章.因为版本号等的原因,在原教程基础上稍加修改就可以实现. 环境: win7旗舰版64位 Node ...
- Node.js 博客实例(五)编辑与删除功能
原教程 https://github.com/nswbmw/N-blog/wiki/_pages的第五章,因为版本号等的原因,在原教程基础上稍加修改就可以实现. 如今给博客加入编辑文章与删除文章的功能 ...
- 原生JS版和jQuery 版实现文件上传功能
<!doctype html> <html lang="zh"> <head> <meta charset="utf-8&quo ...
- Node.js 博客实例(十)pv统计和留言统计
原教程 https://github.com/nswbmw/N-blog/wiki/_pages的第十章,因为版本号等的原因,在原教程基础上稍加修改就可以实现. post.js中将var post={ ...
- Node.js博客搭建
Node.js 博客搭建 一. 学习需求 Node 的安装运行 会安装node,搭建node环境 会运行node. 基础模块的使用 Buffer:二进制数据处理模块 Event:事件模块 fs:文件系 ...
随机推荐
- Hbase源码分析:RPC概况
RPC是hbase中Master,RegionServer和Client三者之间通信交流的纽带.了解hbase的rpc机制能够为通过源码学习hbase奠定良好的基础.因为了解了hbase的rpc机制能 ...
- Java 8 (1) 行为参数化
行为参数化就是可以帮助你处理频繁变更需求的一种软件开发模式.它意味着拿出一个代码块,把它准备好却不去执行它.这个代码块以后可以被你程序的其他部分调用,这意味着你可以推迟这块代码的执行.例如:你可以将代 ...
- mongo 3.4分片集群系列之八:分片管理
这个系列大致想跟大家分享以下篇章: 1.mongo 3.4分片集群系列之一:浅谈分片集群 2.mongo 3.4分片集群系列之二:搭建分片集群--哈希分片 3.mongo 3.4分片集群系列之三:搭建 ...
- SQL Server的安装笔记
SQL安装笔记 安装SQL Server 2008 打开SQL Server 2008中的setup.exe,显示SQL安装程序的对话框. 提示必须安装相关组件Microsoft.NET Framew ...
- SQL server 上机练习题
首先创建一个数据库,里面有 登录表 学生表 课程表 选课表 成绩表 1. 查询Student表中的所有记录的Sname.Ssex和Class列.2. 查询教师所有的单位即不重复的Depart列 ...
- vue+vux+es6+webpack移动端常用配置步骤
1.创建项目(vue项目的流程就不多讲了)2.cnpm install vux --save3.在build/webpack.base.conf.js配置:const vuxLoader = requ ...
- CAD如何直接打印,不出现打印对话框?
主要用到函数说明: MxDrawXCustomFunction::Mx_Print 直接打印,不出现打印对话框,详细说明如下: 参数 说明 double ptLBx 打印的范围左下角x double ...
- 前端axios发送的数据后端接收不到(没有自动依赖注入)可能的原因
前端请求头content-type没有进行正确设置,后端无法解析该类型数据,比如说: 后端若想接收json类型的数据,则需要配置相应的转换器,(spring中可使用@RequestBody注解),若没 ...
- 脚手架工具搭建VUE应用
首先需要安装node.js,然后安装CLI工具. vue init webpack vue-lesson2 使用element组件的话,需要用到如下命令: cd vue-lesson2 vue add ...
- 若要允许 GET 请求,请将 JsonRequestBehavior 设置为 AllowGet(转载)
若要允许 GET 请求,请将 JsonRequestBehavior 设置为 AllowGet 若要允许 GET 请求,请将 JsonRequestBehavior 设置为 AllowGet 请将 J ...