zoukankan      html  css  js  c++  java
  • 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


    提交:


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


    发表:


  • 相关阅读:
    Ubuntu安装软件问题的解决
    寻找两个字符串中最长的公共部分字符串
    CentOS
    vim自定义配置
    git创建远程仓库以及在本地提交到远程仓库的方法
    黑金开发板在NiosII环境下烧写image到flash失败的解决办法
    f.lux 一款免费的护眼开源软件
    python 制作自动化脚本
    修改python 默认的存储路径
    第一篇博客
  • 原文地址:https://www.cnblogs.com/zhchoutai/p/6898530.html
Copyright © 2011-2022 走看看