• 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上传图片的方法

  • 相关阅读:
    Linux关机命令详解
    这二个月都在失眠中。
    GMAIL绑定自己的域名MX解析出现错误
    又上火了。
    FTP命令
    怎样做反向域名解析?
    linux 一些常用到的命令。
    LINUX怎么换IP。
    关于 MOD 和 \ 选择
    WIN2000和WIN2003连备份机的疑问
  • 原文地址:https://www.cnblogs.com/tsxylhs/p/6841757.html
Copyright © 2020-2023  润新知