安装npm install formidable

先把文件上传到临时文件夹,再通过fs重命名移动到指定的目录即可

fs.rename即重命名,但是fs.rename不能夸磁盘移动文件,所以我们需要指定上传的临时目录要和最终目录在同一磁盘下

前段请求

方法1:使用form标签和submit提交

     form(action='/uploadImg', method="post", enctype="multipart/form-data" )
         input(type="file", id="file1", name="file1")
         br
         button(type="submit", id="bt1", name="bt1") upload

方法2:ajax,post提交

    input(type="file", id="file1", name="file1")

button(id="upload", name="upload") submit

javascript方法

    $("#upload").click(function(){

      var data = new FormData();

      var files = $("#file1")[0].files;

      if(files){

        data.append("file", files[0]);

      }

      $.ajax({

        type: 'post',

        dataType: 'json',

        url:'/uploadImg',

        data : data,

        contentType: false,

        processData: false,

        success : function () {}

      }    

上传实现方法:form解析后的files是个对象,所以可以实现多文件上传

tool.uploadImg =function(req, res){
    var fs = require('fs');
    var formidable = require("formidable");
    var form = new formidable.IncomingForm();
    form.uploadDir = "./public/upload/temp/";//改变临时目录
    form.parse(req, function(error, fields, files){
        for(var key in files){
            var file = files[key];
            var fName = (new Date()).getTime();
            switch (file.type){
                case "image/jpeg":
                    fName = fName + ".jpg";
                    break;
                case "image/png":
                    fName = fName + ".png";
                    break;
                default :
                    fName =fName + ".png";
                    break;
            }
            console.log(file.size);
            var uploadDir = "./public/upload/" + fName;
            fs.rename(file.path, uploadDir, function(err) {
                if (err) {
                    res.write(err+"\n");
                    res.end();
                }
                res.write("upload image:<br/>");
                res.write("<img src='/imgShow?id=" + fName + "' />");
                res.end();
            });
        }
    });
};

显示上传后的文件

tool.imgShow = function(req, res){
    var fs = require("fs");
    var arg = tool.handleGetArg(req, res);
    var uploadDir = "./public/upload/" + arg["id"];
    fs.readFile(uploadDir, "binary", function(err, file){
        if(err){
            res.write(err+"\n");
            res.end();
        }else{
            res.write(file, "binary");
            res.end();
        }
    });
};

node.js+express+jade系列六:图片的上传的更多相关文章

  1. node.js+express+jade系列七:富文本编辑框的使用

    下载nicEdit富文本编辑框, 把nicEdit.js文件放到public/javascripts/下 新建jade文件:代码如下 doctype htmlhtml    head        t ...

  2. node.js+express+jade系列五:ajax登录

    本文通过jquery实现简单的无刷新登录 1:首先要在router中配置登录请求,因为登录需要传user和pwd考虑到安全需用post请求 {        path:'/',        meth ...

  3. node.js+express+jade系列四:jade嵌套的使用

    jade是express自带的模板引擎 jade文件可以嵌套使用,include引用外部jade文件,extends引用jade模板 例如 有一个主jade文件layout.jade,引用top.ja ...

  4. node.js+express+jade系列三:404错误的配置

    1:新建一个404.jade 2:在app.js后面配置如下代码 app.use(function(req, res){        res.render("404", {sta ...

  5. node.js+express+jade系列二:rotue路由的配置

    页面的访问最常见的是get和post两种,无论是get请求还是post请求express自动判断执行app.get或app.post 1:app.get(名称,路径)或app["get&qu ...

  6. node.js+express+jade系列一:session的使用

    此出只介绍内存session的配置好使用 1:打开app.js文件,添加下面红色内容,一定要注意位置在router前面 app.use(express.methodOverride()); sessi ...

  7. node.js系列(实例):原生node.js+formidable模块实现简单的文件上传

    /** * 原生node.js结合formidable模块实现图片上传改名 * @Author:Ghost * @Date:2016/07/15 * @description: * 1.引入模块htt ...

  8. [译]简单得不得了的教程-一步一步用 NODE.JS, EXPRESS, JADE, MONGODB 搭建一个网站

    原文: http://cwbuecheler.com/web/tutorials/2013/node-express-mongo/ 原文的源代码在此 太多的教程教你些一个Hello, World!了, ...

  9. node.js:《接口实现文件的上传和下载》

    使用node.js写上传文件和下载文件的接口 上传接口: 开始写接口前,我们先安装一个上传文件的插件:npm install multer 安装成功在package.json或package-lock ...

随机推荐

  1. MapReduce源码分析之InputFormat

    InputFormat描述了一个Map-Reduce作业中的输入规范.Map-Reduce框架依靠作业的InputFormat实现以下内容: 1.校验作业的输入规范: 2.分割输入文件(可能为多个), ...

  2. IOS开发中的分享到邮件

    本篇和UIWebView的全屏截图,可以一起使用,先对UIWebView进行截图,然后分享到邮箱(当时做还有分享到微信.腾讯微博.新浪微博功能,这三个根据官方资料,比较容易实现,这里就不进行解说了). ...

  3. iOS系列译文:自定义Collection View布局

    原文出处: Ole Begemann   译文出处: 黄爱武(@answer-huang).欢迎加入技术翻译小组. UICollectionView在iOS6中第一次被介绍,也是UIKit视图类中的一 ...

  4. JQuery+Json 省市区三级联动

    一.画面以及JS <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content=&qu ...

  5. 记CBS一次动人心魄的数据保卫战

    接触分布式存储已经有一年多的时间了,首次遇到存储侧三份数据都有异常的情况,三份数据异常意味着客户数据的丢失,这个对云存储来讲是致命的打击.为了保证数据的安全,CBS运维和开发的同学进行了持续两天一夜的 ...

  6. 成功扩展live555支持ipv6,同时支持RTSPServer & RTSPClient

    live555对ipv6的扩展 从live555的官网看live555的发展历史,实在是历史悠久,保守估计已经发展了至少16年以上了,同时,这也导致了live555在很多架构和考虑上面不能满足现代化的 ...

  7. 关于iOS的手势UIGestureRecognizer问题

    typedef NS_ENUM(NSInteger, UIGestureRecognizerState) { UIGestureRecognizerStatePossible, // 尚未识别是何种手 ...

  8. 【python】-- pymsql 操作MySQL

    pymysql 对MySQL数据库进行简单数据操作python模块主要是:MySQLdb.pymsql,MySQLdb模块主要用于python2.X,而python3.X则使用pymsql,pymys ...

  9. 我的Android进阶之旅------>FastJson的简介

    在最近的工作中,在客户端和服务器通信中,需要采用JSON的方式进行数据传输.简单的参数可以通过手动拼接JSON字符串,但如果请求的参数过多,采用手动拼接JSON字符串,出错率就非常大了.并且工作效率也 ...

  10. 教你管理SQL备份与恢复系列(1-20)

    原链接:https://bbs.51cto.com/thread-1147908-1.html 教你备份与恢复数据库,直接下面下文档吧. 教你备份与恢复数据库(1)事务 http://bbs.51ct ...