node上传图片第一种方式

1,首先引入模块 "connect-multiparty": "~1.2.5",

在package.json中添加 "connect-multiparty": "~1.2.5",

然后在命令中切换到项目目录,使用npm命令:npm installl;

基本配置完成

index.html

<!DOCTYPE html>

<html>

  <head>

    <title><%= title %></title>

    <link rel='stylesheet' href='/stylesheets/style.css' />

  </head>

  <body>

    <h1><%= title %></h1>

    <p>Welcome to <%= title %></p>

    <form action="/test" method="post">

     姓名:	<input type="text" name="name"><br>

      年龄: <input type="text" name="age"><br>

      <input type="submit" value="提交">

      </form>

      <br>

      <span><a title="上串" href="/upload">上传</a></span>

    <span><a href="/uploadtupian" title="上传">上传多个图片例子</a>></span>>

  </body>

</html>

app.js红色标注部分为上传图片代码

var express = require('express');

var path = require('path');

var favicon = require('static-favicon');

var logger = require('morgan');

var cookieParser = require('cookie-parser');

var bodyParser = require('body-parser');

var ejs=require('ejs');

var routes = require('./routes/index');

var users = require('./routes/users');

var upload=require('./routes/upload');

var uploadtupian=require('./routes/uploadtupian');

var test=require('./routes/test');

var multer=require("multer");

var app = express();

var flash=require('connect-flash');

var md5=require('md5');

  var fs = require('fs');

  var multipart=require('connect-multiparty');

// view engine setup

// view engine setup

app.set('views', path.join(__dirname, 'views'));

app.engine('.html', ejs.__express);

app.set('view engine', 'html');

app.use(flash());

//跨域请求

app.all('*',function (req, res, next) {

    res.header('Access-Control-Allow-Origin', '*');

    res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');

    res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');

    if (req.method == 'OPTIONS') {

        res.send(200);

    }

    else {

        next();

    }

});

app.use(favicon());

app.use(logger('dev'));

app.use(bodyParser.json());

app.use(bodyParser.urlencoded());

app.use(cookieParser());

app.use(express.static(path.join(__dirname, 'public')));

/*app.use(express.bodyParser({uploadDir:'./public/.images'}));*/

app.use('/', routes);

app.use('/users', users);

app.use('/test', test);

app.use('/up',upload);

app.use('/uploadtupian',uploadtupian);

app.post('/upload', multipart(), function(req, res){

  console.log(req.body.name);

  //get filename

  var filename = req.files.files.originalFilename || path.basename(req.files.files.ws.path);

  //copy file to a public directory

  //修改文件名

   console.log(filename);

     var newname=56;

  var targetPath = path.dirname(__filename) + '/public/images/' + filename;

  //copy file

  fs.createReadStream(req.files.files.ws.path).pipe(fs.createWriteStream(targetPath));

  var newname=path.dirname(__filename)+'/public/images/'+newname+'.jpg';

      filename=fs.rename(targetPath,newname,function(err){

        if(err){

          console.log('改名失败');

        }

        else{

  console.log("改名成功");

}

});

  //return file url

  res.json({code: 200, msg: {url: 'http://' + req.headers.host + '/' + newname}});

});

/* app.post('/file-upload', function(req, res) {

    console.log(req);

     // 获得文件的临时路径

     var tmp_path = req.files.thumbnail.path;

    // 指定文件上传后的目录 - 示例为"images"目录。

    var target_path = './public/images/' + req.files.thumbnail.name;

    // 移动文件

    fs.rename(tmp_path, target_path, function(err) {

      if (err) throw err;

      // 删除临时文件夹文件,

      fs.unlink(tmp_path, function() {

         if (err) throw err;

         res.send('File uploaded to: ' + target_path + ' - ' + req.files.thumbnail.size + ' bytes');

      });

    });

  });*/

app.use('/upload',function(req,res){

    res.render('upload',{

        title:"文件上产"

    });

});

/// catch 404 and forwarding to error handler

app.use(function(req, res, next) {

    var err = new Error('Not Found');

    err.status = 404;

    next(err);

});

/*//文件上长

app.use(multer({

dest:'./public/images',

rename:function(fieldname,filename){

    return filename;

}

}))*/

/// error handlers

// development error handler

// will print stacktrace

if (app.get('env') === 'development') {

    app.use(function(err, req, res, next) {

        res.status(err.status || 500);

        res.render('error', {

            message: err.message,

            error: err

        });

    });

}

// production error handler

// no stacktraces leaked to user

app.use(function(err, req, res, next) {

    res.status(err.status || 500);

    res.render('error', {

        message: err.message,

        error: {}

    });

});

module.exports = app;

upload.html

<!DOCTYPE html>

<html>

<head>

	<title><%=title%></title>

</head>

<body>

<form  method='post'  enctype='multipart/form-data' id = "fromUploadFile">

  姓名:	<input type="text" name="name"><br>

	<input type="file" name="files" class="from-control"><br>

	<button class='btn btn-primary' onclick="uploadFile()">上传</button>

</form>

<div class="cow" style="text-align: center">

	<img id=imgShow>

	<p id="#spanMessage"></p>

</div>

</body>

 <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>

	<script type="text/javascript" src="js/ipload.js"></script>

</html>

ipload.js

function uploadFile(){

	var fromData=new FormData($("#fromUploadFile")[0]);

	$.ajax({

		url: '/uploadhaha',

		type: 'post',

		data: fromData,

	 async: false,

    cache: false,

    contentType: false,

    processData: false,

    success: function(data){

      if(200 === data.code) {

        $("#imgShow").attr('src', data.msg.url);

        $("#spanMessage").html("上传成功");

      } else {

        $("#spanMessage").html("上传失败");

      }

      console.log('imgUploader upload success, data:', data);

    },

    error: function(){

      $("#spanMessage").html("与服务器通信发生错误");

    }

  });

}

二.上传多组照片

导入模块 "formidable":"1.1.1"

在package.json中加入 "formidable":"1.1.1";

package.json

{

  "name": "application-name",

  "version": "0.0.1",

  "private": true,

  "scripts": {

    "start": "nodejs ./bin/www"

  },

  "dependencies": {

    "express": "~4.0.0",

    "static-favicon": "~1.0.0",

    "morgan": "~1.0.0",

    "cookie-parser": "~1.0.1",

    "body-parser": "~1.0.0",

    "debug": "~0.7.4",

    "ejs": "~0.8.5",

    "multer":"0.1.6",

    "connect-flash": "0.1.1",

    "md5":"^2.1.0",

 "connect-multiparty": "~1.2.5",

 "formidable":"1.1.1"

  }

}

主要代码

app.use('/', routes);

app.use('/users', users);

app.use('/test', test);

app.use('/up',upload);

app.use('/uploadtupian',uploadtupian);

然后再router文件夹中

新建uploadtupian.js

var express = require('express');

var router = express.Router();

/* GET home page. */

router.get('/', function(req, res) {

  res.render('up', { title: '上传多组图片' });

});

module.exports = router;

然后视图文件夹下

新建up.html

<!DOCTYPE html>

<html>

<head>

	<title><%=title%></title>

</head>

<body>

'<form  enctype="multipart/form-data" method="post" action="/up">'+

      '<input type="text" name="name" /> '+

      '<input type="text" name="password" /> '+

      '<input type="file" name="file1" multiple="multiple" /> '+

      '<input type="file" name="file2" multiple="multiple" /> '+

      '<input type="submit" name="shangchuan" value="提交">'+

    '</form>'

</body>

</html>

app.js

中添加app.use('/up',upload);

在router文件夹中添加

upload.js文件

var express =require('express');

var path = require('path');

var router =express.Router();

var formidable=require('formidable');

var fs=require('fs');

router.post('/',function(req,res,next){

	console.log(req.body);

	var form=new formidable.IncomingForm();

	form.uploadDir='/tmp';

	form.keepExtensions=true;

var targetDir=path.join(__dirname,'../public/upload');

fs.access(targetDir,function(err){

	if(err){

		fs.mkdirSync(targetDir);

	}

	_fileParse();

});

function _fileParse(){

	form.parse(req,function(err,fields,files){

		console.log(fields);

          if(err) throw err;

          	var fileUrl=[];

          	var errCount=0;

          	var keys=Object.keys(files);

          	keys.forEach(function(key){

             var filePath=files[key].path;

             var fileExt=filePath.substring(filePath.lastIndexOf('.'));

             if(('.jpg.jpeg.png.gif').indexOf(fileExt.toLowerCase())==-1){

             	errCount+=1;

             }

             else{

             	var fileName=new Date().getTime()+fileExt;

             	var targetFile=path.join(targetDir,fileName);

             	//

                   fs.renameSync(filePath,targetFile);

                   fileUrl.push('/upload'+fileName);

             }

          	})

          res.json({fileUrl:fileUrl,success:keys.length-errCount, error:errCount})

	})

}

})

module.exports=router;

至此完成两种node上传图片的方法

Nodejs 传图片的两种方式的更多相关文章

  1. ajax的data传参的两种方式

    ajax的data传参的两种方式 本文为转载. 1.[javascript] view plain copy /** * 订单取消 * @return {Boolean} 处理是否成功 */ func ...

  2. nodejs触发事件的两种方式

    nodejs触发事件的两种方式: 方式之一:通过实例化events.EventEmitter //引入events模块 var events = require('events'); //初始化eve ...

  3. jQuery 实现图片放大两种方式

    jQuery 实现图片放大两种方式 一.利用css样式表实现,多用于后台显示 1.这种比较简单,利用dom元素的hover实现样式切换 <style> img{ cursor: point ...

  4. UIImage加载本地图片的两种方式

    UIImage加载图片方式一般有两种: (1)imagedNamed初始化:默认加载图片成功后会内存中缓存图片,这个方法用一个指定的名字在系统缓存中查找并返回一个图片对象.如果缓存中没有找到相应的图片 ...

  5. UIImage创建图片的两种方式的区别

    在工作中经常会遇到添加图片,用哪种方式添加更好呢?请看详解 方法一: UIImage *image = [UIImage imageNamed:@"haha"]; 这种方法创建的图 ...

  6. jq ajax传参的两种方式

    第一种   在url ? 后通过拼接传参   第二种 通过data传参 (1)第一种方法:(通过url传参) function GetQuery(id) { if (id ==1||id==7) { ...

  7. android绘制圆形图片的两种方式

    看下效果先 下面有完整的示例代码 使用BitmapShader(着色器) 我们在绘制view 的时候 就是小学上美术课 用水彩笔在本子上画画 使用着色器绘制圆形图片最简单的理解方式 就是把bitmap ...

  8. button上加上图片的两种方式

    ////  ViewController.m//  UIButtonDemo////  Created by hehe on 15/9/15.//  Copyright (c) 2015年 wang. ...

  9. Github 上传代码的两种方式

    上传本地代码/文件->Github 折腾了半天时间... Github前期准备部分 1)登录github,新建一个 repository 2)repository 命名 3)Github是一个托 ...

随机推荐

  1. 4-java 格式化输出

    java保留两位小数4种方法 import java.math.BigDecimal; import java.text.DecimalFormat; import java.text.NumberF ...

  2. AttributeError: 'WebDriver' object has no attribute 'switchTo'

    不在错误中爆发,就在错误中死亡呀. from selenium import webdriver from selenium.webdriver.support.ui import WebDriver ...

  3. Oracle高级查询之OVER

    注释:为了方便大家学习和测试,所有的例子都是在Oracle自带用户Scott下建立的 oracel的高级用法:rank()/dense_rank() over(partition by ...orde ...

  4. Sqlserver的身份验证模式

    1.服务器名称: . 在服务器名称这里,我们有以下几种选择来连接到本地: (1)默认的服务器名称:也就是电脑主机的名称 (2)".",“.”就表示主机. (3)localhost ...

  5. Task.WaitAll代替WaitHandle.WaitAll

    Task.Waitall阻塞了当前线程直到全完.whenall开启个新监控线程去判读括号里的所有线程执行情况并立即返回,等都完成了就退出监控线程并返回监控数据. task.Result会等待异步方法返 ...

  6. thinkphp两表联查并且分页

    ThinkPHP中关联查询(即多表联合查询)可以使用 table() 方法或和join方法,具体使用如下例所示: 1.原生查询示例: $Model = new Model(); $sql = 'sel ...

  7. devexpress 如何读demo源码 总结

    对于初学这个庞大的控件集合的程序猿来讲应该是有些难度的.今天就devexpress  demo 里边一些东西就本人的所学做一下引导吧. dev 有个帮助文件 DevExpress 中文帮助文档 和每个 ...

  8. 在myeclipse中修改发布到tomcat的项目目录名称

    在项目上右键-->Properties 搜索web-->Project Facets(Web) 更改右侧Web Content-root的信息

  9. C# 切换到二级域名，使用Cookie

    之前的网站一直用的是一级域名,现因为其他原因,需要使用一个二级域名访问,原先的域名不用了. 使用二级域名后,发现Cookie一直取不到,分析代码发现,原来是需要在设置cookie的时候,把二级域名加上 ...

  10. spring batch批处理框架学习

    内如主要来自以下链接: http://www.importnew.com/26177.html http://www.infoq.com/cn/articles/analysis-of-large-d ...