node.js博客实例添加文件上传功能

zhchoutai      2022-02-10     213

关键词:

原教程 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

技术分享

提交:

技术分享

发表博客,在博客里引用照片:

技术分享

发表:

技术分享









node.js博客实例简单博客

原教程 https://github.com/nswbmw/N-blog/wiki/_pages的第一章。因为版本号等的原因,在原教程基础上稍加修改就可以实现。环境:win7旗舰版64位Node.js:0.10.31mongodb:2.6.4express:3.×效果:注冊界面:登录界面:watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi... 查看详情

ssm整合-图片上传功能(转)(代码片段)

...户的时候上传图片(其实任何文件都可以)。文件名:以博客名+日期的年月日时分秒毫秒形式命名如言曌博客2017082516403213.png路径:上传到uploads文件夹,并生成相应的年和月子文件夹如uploads/2017/8/言曌博客2017 查看详情

在 Backand 如何从 node.js 操作上传文件?

】在Backand如何从node.js操作上传文件?【英文标题】:InBackandhowdoIuploadafilefromnode.jsaction?【发布时间】:2016-06-0318:33:48【问题描述】:我在使用上传功能时遇到问题。这是我的情况。我有:一个SQL查询,一个使用该查询生成.xlsx报... 查看详情

使用 Multer 将 csv 文件上传到 Node.js 时出现意外字段

】使用Multer将csv文件上传到Node.js时出现意外字段【英文标题】:UnexpectedfieldoccurswhileuploadingcsvfilestoNode.jsusingMulter【发布时间】:2019-01-3006:05:00【问题描述】:我正在使用Node.js、Vue和Multer开发文件上传功能。这里是用Vue.js编写的... 查看详情

node.js博客实例pv统计和留言统计

原教程https://github.com/nswbmw/N-blog/wiki/_pages的第十章,因为版本号等的原因,在原教程基础上稍加修改就可以实现。post.js中将varpost={...}修改为(每次修改此处之后都要将e:/mongodb/blog/清空)://要存入数据库的文档varpost={name:this.name... 查看详情

multer/express/node.js图片上传实例

前端<formenctype="multipart/form-data"method="post"><inputtype="file"id="avatar"name="avatar"/><button>提交</button></form><script>$(‘button‘).click(function(){varfiles 查看详情

node.js之文件下载(代码片段)

Node.js之文件下载,主要最近解决我的一个需求。需求描述:如何将腾讯云上传的文件存储到本地某个目录下,如果用js来实现,纯JavaScript没有这样的功能(也许有),正好我这个项目用node.js比较多,正好可以利用node.js丰富的API实现... 查看详情

用node.js+mongodb搭建个人博客(万众期待的router.js)

万众期待的router.js,是我现在最想写的一个博客。因为他包含了整个个人博客的精髓。在这里,所有的请求配置,返回的参数等等所做的业务逻辑都在这个文件里实现。我会详细说明这些代码的作用,所以这篇博客会有点长,但... 查看详情

我无法将文件上传到我使用 node js multer 指定的目录

...建了一个Web服务。我创建了一个带有React界面的表单,并添加了用户信息和文件上传。我将此信息保存到mongodb。我想使用multer将文件保存到节点js服务器,但 查看详情

node.js上传文件

Express+MulterNode.js上传文件demo,基于Express和Multer。app.jsletexpress=require('express')letmulter=require('multer')letapp=express()app.use(express.static(__dirname));letstorage=multer.diskSt 查看详情

技术博客-1drf框架下的图片(文件)上传(代码片段)

技术博客DRF框架下的图片(文件)上传1、最终效果2、图片上传? alpha阶段实现了拥有题目和正文字段的意见反馈功能,为了更好的让用户反馈bug,beta阶段新增了图片上传功能。? 最终效果的实现难点主要在图片上传上,一开始觉... 查看详情

node.js - 安全的图像文件上传

】node.js-安全的图像文件上传【英文标题】:node.js-secureimagefileupload【发布时间】:2013-07-1604:13:09【问题描述】:我们必须为node.js项目实现一个图片上传器。作为我们使用express.js的框架,我们按照此处描述的方式进行操作:http:/... 查看详情

node.js上传下载pdf文件

】node.js上传下载pdf文件【英文标题】:node.jsuploadanddownloadpdffile【发布时间】:2015-09-1912:00:22【问题描述】:框架:node.js/express.js/busboy/gridfs-stream(mongodb)我正在使用busboy上传文件,然后使用gridfs-stream将文件存储在mongodbgridfs中。re... 查看详情

利用vue.js+node.js+mongodb实现一个博客系统(附源码)

前言本文主要介绍了利用Vue.js+Node.js+MongoDB实现一个博客系统,这个博客使用Vue做前端框架,Node+express做后端,数据库使用的是MongoDB。实现了用户注册、用户登录、博客管理、文章编辑、标签分类等功能实现的功能   &... 查看详情

ueditor上传功能

...。2.添加Web窗体,并按以下方式引用配置和源文件,并实例化。 3.添加相应版本的Newtonsoft.Json引用。 测试http://localhost:62832/Ueditor/net/controller.ashx?action=c 查看详情

node.js解析excel大文件的问题

...可以解析post提交的问题,但是发现获取不到formdata上传的文件。  后经查资料,改用koa-body解决:constkoaBody=require('koa-body');app.use(koaBody(multipart:true,formidable:maxFileSize:200*1024*1024//设置上传文件大小最大限制,默认2M))  然... 查看详情

HTML + Node.js 文件上传

】HTML+Node.js文件上传【英文标题】:HTML+Node.jsFileUpload【发布时间】:2016-02-1420:14:48【问题描述】:请帮我解决这个问题。我得到空值作为结果。HTML代码<formmethod="post"enctype="multipart/form-data"action="/file-upload"><inputtype="text"name=... 查看详情

Node.js 获取文件扩展名

】Node.js获取文件扩展名【英文标题】:Node.jsgetfileextension【发布时间】:2012-06-0714:01:18【问题描述】:我正在使用express3在node.js中创建文件上传功能。我想获取图像的文件扩展名。所以我可以重命名文件,然后将文件扩展名附加... 查看详情