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. spring boot 2.0 与FASTDFS进行整合

    只支持在spring-boot 2.0以及以上版本中使用 1.pom.xml 里引入FASTDFS的依赖,toobato与fastdfs作者一起,将fastdfs的功能进行了重构与简化 <!-- ...

  2. tar.gz和.rpm包的区别与使用(转)

    一.Linux软件的二进制分发 Linux软件的二进制分发是指事先已经编译好二进制形式的软件包的发布形式,其优点是安装使用容易,缺点则是缺乏灵活性,如果该软件包是为特定的硬件/操作系统平台编译的,那它 ...

  3. ThinkPhp框架开发微信支付——刷卡支付

    首先讲讲我遇到的坑: 1.下载了微信的demo,界面如下,一直调试不通过,原来点击链接地址是微信测试的网页地址...要改成自己开发的网页地址.... 2.demo不是用ThinkPhp框架的,我不懂, ...

  4. 39-java中Arrays.sort 和 collections.sort()总结

    总结一下java 中的两种排序工具: Arrays.sort() : 主要针对 数组类型排序,如果数组里面的元素是对象,要按对象属性排序的话,需要重写 Comparator() 函数,重写里面的  i ...

  5. php5.6 版本出现 Automatically populating $HTTP_RAW_POST_DATA is deprecated and will be removed in a future version 的错误

    解决方法是修改php.ini配置: ;always_populate_raw_post_data = -1 把前面的分号去掉 always_populate_raw_post_data = -1 然后 ...

  6. stark组件开发之列表页面预留钩子方法。 可根据用户的不同，显示不同的列

    要实现,这个方法.子类中 list_diplay 这个列表, 就不能够写死.他应该是 可以根据.用户的不同,返回不同的值. 所以 就需要一个函数, 可以进行判断当前用户是谁. 并且往这个列表中添加,他 ...

  7. ef linq 中判断实体中是否包含某集合

    我有一个需求,问题有很多标签,在查询时,需要筛选包含查询标签的一个集合(List<int>),以前的做法是先查询出来符合查询标签条件的标签id的结果集A,再查询问题时,加上判断是否包含该标 ...

  8. 9.10 h5日记

    9.10 1.什么是属性 属性是表示某些事物的一些特征 2.属性分为标签属性和样式属性,二者的区别在于哪里 标签属性:<img src="01.jpg" width=&quo ...

  9. 理解String拼接，+运算符重载的实际效果

    引申:一个常见的String的面试题 public static void main(String[] args) { // TODO Auto-generated method stub Strin ...

  10. 全基因组测序 Whole Genome Sequencing

    全基因组测序 Whole Genome Sequencing 全基因组测序(Whole Genome Sequencing,WGS)是利用高通量测序平台对一种生物的基因组中的全部基因进行测序,测定其 ...