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. HelloWorld 基础语法

    所有内容取自菜鸟教程 public class HelloWorld {    /* 第一个Java程序     * 它将打印字符串 Hello World     */    public stat ...

  2. public void method()，void前面的泛型T是什么

    public <T>这个T是个修饰符的功能,表示是个泛型方法,就像有static修饰的方法是个静态方法一样. 注意<T> 不是返回值,此处的返回值是void ,此处的<T ...

  3. Django+Uwsgi+Nginx部署

    一 uwsgi介绍 uWSGI是一个Web服务器,它实现了WSGI协议,uwsgi, http等协议. Nginx中HttpUwsgiMoule的作用是与uWSGI服务器进行交换 1 WSGI是一种W ...

  4. ubuntu关闭服务需要身份验证

    service tomcat stop ==== AUTHENTICATING FOR org.freedesktop.systemd1.manage-units === 需要通过认证才能停止“tom ...

  5. Exploring the world of Android :: Part 1

    This blog is accidentally find out, it tells the story of one of our friends about the exploration o ...

  6. Navicat连接MySQL，出现2059 - authentication plugin 'caching_sha2_password'的解决方案

    昨天当我把MySQL的安装程序下载并安装好,然后又下载了另外一个工具来使用它,该工具的名称是Navicat Premium,当我通过该工具连接MySQL Workbench的时候,无法连接,提示“20 ...

  7. c# 24种设计模式

    备忘录模式(Memento Pattern) 策略模式(Strategy Pattern) 抽象工厂模式(Abstract Factory Pattern) 代理模式(Proxy Pattern) 单 ...

  8. BZOJ1057或洛谷1169 [ZJOI2007]棋盘制作

    BZOJ原题链接 洛谷原题链接 设\(L[i][j],R[i][j],H[i][j]\)表示点\((i,j)\)向左.右.上尽量拓展的左端点.右端点.上端点的坐标. \(L,R\)直接初始化好,\(H ...

  9. tar 解压某个指定的文件或者文件夹

    1. 先查看压缩文档中有那些文件,如果都不清楚文件内容,然后就直接解压,这个是不可能的 使用#tar -tf 压缩包名称,可以查看压缩包内容 2.解压某个文件 tar -zxvf zabbix.tar ...

  10. 201621123008 《Java程序设计》第12周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 面向系统综合设计-图书馆管理系统或购物车 使用流与文件改造你的图书馆管理系统或购物车. 2.1 简述如何 ...