Nodejs 传图片的两种方式

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 传图片的两种方式的更多相关文章

ajax的data传参的两种方式
ajax的data传参的两种方式本文为转载. 1.[javascript] view plain copy /** * 订单取消 * @return {Boolean} 处理是否成功 */ func ...
nodejs触发事件的两种方式
nodejs触发事件的两种方式: 方式之一:通过实例化events.EventEmitter //引入events模块 var events = require('events'); //初始化eve ...
jQuery 实现图片放大两种方式
jQuery 实现图片放大两种方式一.利用css样式表实现,多用于后台显示 1.这种比较简单,利用dom元素的hover实现样式切换 <style> img{ cursor: point ...
UIImage加载本地图片的两种方式
UIImage加载图片方式一般有两种: (1)imagedNamed初始化:默认加载图片成功后会内存中缓存图片,这个方法用一个指定的名字在系统缓存中查找并返回一个图片对象.如果缓存中没有找到相应的图片 ...
UIImage创建图片的两种方式的区别
在工作中经常会遇到添加图片,用哪种方式添加更好呢?请看详解方法一: UIImage *image = [UIImage imageNamed:@"haha"]; 这种方法创建的图 ...
jq ajax传参的两种方式
第一种在url ? 后通过拼接传参第二种通过data传参 (1)第一种方法:(通过url传参) function GetQuery(id) { if (id ==1||id==7) { ...
android绘制圆形图片的两种方式
看下效果先下面有完整的示例代码使用BitmapShader(着色器) 我们在绘制view 的时候就是小学上美术课用水彩笔在本子上画画使用着色器绘制圆形图片最简单的理解方式就是把bitmap ...
button上加上图片的两种方式
//// ViewController.m// UIButtonDemo//// Created by hehe on 15/9/15.// Copyright (c) 2015年 wang. ...
Github 上传代码的两种方式
上传本地代码/文件->Github 折腾了半天时间... Github前期准备部分 1)登录github,新建一个 repository 2)repository 命名 3)Github是一个托 ...

随机推荐

11-web网页制作APP
如何将H5和WebApp 加壳成apk.ipa 问题:已经做好的纯H5的站点想分别加两个壳子,变成apk和ipa ,要怎么实现? 要点: 1. app只是壳子,打开app直接跳转到H5的Ur ...
build.js
// https://github.com/shelljs/shelljs// 检查NodeJS和npm的版本require('./check-versions')() process.env.NOD ...
linux C程序中获取shell脚本输出(如获取system命令输出)
转载自 http://blog.csdn.net/hjxhjh/article/details/7909518 1. 前言 Unix 界有一句名言:“一行shell脚本胜过万行C程序”,虽然这句话有些 ...
在Qt(C++)中与Python混合编程
一.PythonQt库在Qt(C++)中与Python混合编程,可以使用PythonQt库. 网站首页:http://pythonqt.sourceforge.net 下载页面:https://so ...
Varnish 入门
本文将介绍 varnish 的工作流程,安装以及 varnish 的配置三个方面的内容.首先简单的介绍 varnish 以及其工作流程,大概了解其内部原理,然后介绍了 varnish 的安装方法,最后 ...
c#devexpress GridContorl添加进度条
demo 的实现图下边是步骤和代码 1定义时钟事件,定时的增加进度条的增量. 2: 添加进度条 3;定义字段属性 using System; using System.Collections.G ...
5B - 一只小蜜蜂...
有一只经过训练的蜜蜂只能爬向右侧相邻的蜂房,不能反向爬行.请编程计算蜜蜂从蜂房a爬到蜂房b的可能路线数. 其中,蜂房的结构如下所示. Input 输入数据的第一行是一个整数N,表示测试实例的个数,然 ...
PAT乙级解题目录
有些题做得可能比较傻,有好方法,或者有错误还请告诉我,多多指教=.= 思路比较好的题目我都有讲的很详细. 剩下三道题有待优化,等改好了再上传. 标题题目链接解题链接 1001 害死人不偿命的( ...
__PRETTY_FUNCTION__, __FUNCTION__, __func__
__PRETTY_FUNCTION__, __FUNCTION__, __func__这三者的区别是什么? http://stackoverflow.com/questions/4384765/wha ...
02. pt-archiver
pt-archiver \--source h=192.168.100.101,P=3306,u=admin,p='admin',D=db01,t=t01 \--dest h=192.168.100. ...

Nodejs 传图片的两种方式

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

随机推荐

热门专题