• node应用通过multer模块实现文件上传


    multer用于处理文件上传的nodejs中间件,主要跟express框架搭配使用,只支持表单MIME编码为multipart/form-data类型的数据请求.

    如果要处理其他编码的表单数据可以通过busboy或者formidable。

     multer模块的安装: npm install multer

    构造multer对象: multer(opt)

     opt是个key-value对象,包含属性dest/storage,fileFilter,limits.分表表示文件的存储位置/方式,文件过滤,文件大小限制.

    例如:

    //通过设置dest属性,表示上传文件的存储位置
    let objmulter = multer({ dest: path.join(__dirname,'uploads')});

    如果想对上传文件做更多的选项设置,比如文件名,存储类型等可以通过指定storagelet storage = multer.diskStorage({

    //文件存储路径
       destination: (req , file , cb )=>{
          cb(null , path.join(__dirname , 'uploads'));
       },
       //修改上传文件的名字
       //file 是个文件对象 ,fieldname对应在客户端的name属性
    //存储的文件需要自己加上文件的后缀,multer并不会自动添加
    //这里直接忽略文件的后缀.
    filename: (req , file , cb ) => { cb( null, file.fieldname +'-' + Date.now()); } }); let objMulter = multer({storage : storage });

    如果初始化multer时候没有指定dest或者storage,上传的文件将保存在内存中,永远不会写入到磁盘中,在storage中如果没有指定destination值,那么上传的文件将存储在系统默认的临时文件夹.

    multer关联的文件信息:
    filedname : 在form表单中指定的name属性值 orginalname : 原始文件名 encoding : 文件编码方式 mimetype : 多媒体类型 size : 文件大小,单位b destination : 文件上传后存储在服务端的路径 filename : 文件在服务端的命名 path : 文件在服务端的完整路径 buffer : 文件二进制数据 ps:其中destination,filename和path只有在指定storage属性时候有效.而buffer只有文件在内存中存储时候有效.

    multer同时提供了single/array/fields/any方法用于对接受文件数的控制.

    1) single(fieldname) 接收单个文件,通过req.file访问该文件
    2) array(fieldnaem,[maxcount]) 接收多个文件,通过req.files数组方法文件.maxcount指定接收文件最大数.
    3) fields(fields) 接受指定fieldname的文件,fieldname由客户端决定,通过req.files数组方法
    4) any 接收所有文件上传,通过req.files访问文件

    ps:该实例基于nodejs v5.8,js部分使用到es6, web框架基于express,web模板esj-mate,所以你需要安装nodejs,同时通过npm install命令安装express,ejs-mate,multer模块.

    1.app.js

    "use strict"
    
    const express = require('express');
    const path = require('path');
    const multer = require('multer');
    
    let app = express();
    let storage = multer.diskStorage({
       //文件存储路径
       destination: (req , file , cb )=>{
          cb(null , path.join(__dirname , 'uploads'));
       },
       //修改上传文件的名字
       //file 是个文件对象 ,fieldname对应在客户端的name属性
       filename: (req , file , cb ) => {
          cb( null, file.fieldname +'-' + Date.now());
       }
    });
    
    
    let METHOD_MODE = { SINGLE:'single',ARRAY:'array' , ANY:"any"};
    let isDest = false;  //不是dest就是storage
    
    let obj = null;
    
    let multerobj =  null;
    if( isDest ){
      multerobj = multer({
        dest: path.join(__dirname,'uploads')
      });
    }else {
      multerobj = multer({
        storage: storage
      });
    };
    
    //默认使用single方法,如果需要使用
    //array和any和field等方法
    //在index.html也需要做相应的修改
    let mode = METHOD_MODE.SINGLE;
    const  FIELD_NAME = "_file";
    let upload_multer ;
    
    (function(){
      switch( mode ){
        case METHOD_MODE.SINGLE: upload_multer = multerobj.single(FIELD_NAME);break;
        case METHOD_MODE.ARRAY: upload_multer = multerobj.array(FIELD_NAME);break;
        case METHOD_MODE.ANY: upload_multer = multerobj.any();break;
        default:
           upload_multer = null; break;
      }
    })();
    
    if(upload_multer == null ){
       throw new Error("exception");
    }
    
    
    app.use('/public',express.static(path.join(__dirname , 'public')));
    app.set('views',path.join(__dirname , "views"));
    app.set('view engine','html');
    app.engine('html',require('ejs-mate'));
    
    app.get('/' , (req ,res) =>{
      res.render('index',{title:'multer: File Upload Demo'});
    });
    
    
    let objMulter = multer({storage : storage });
    
    app.post('/upload', (req, res ) => {
      upload_multer( req, res , function( err ){
         if( mode == METHOD_MODE.ARRAY || mode == METHOD_MODE.ANY){
           console.log( "file length: " + req.files.length );
         }else if(mode == METHOD_MODE.SINGLE){
           console.log(JSON.stringify( req.file ));
         }
         if(err) return res.json({issuccessful: 0, message: err });
         else
         return res.json({issuccessful: 1, message: "File is uploaded "});
      });
    });
    
    app.listen(3000,()=>{console.log("server is running...")});

    2.index.html

    <!doctype html>
    <html>
    <head>
      <meta charset="utf-8">
      <title><%=title %> </title>
    </head>
    <body>
      <div>
        <form enctype="multipart/form-data" method="post" action="/upload">
          File:<input type="file" id="_file" name="_file" style="400px;height:35px;"/>
          <!-- 仅仅在使用multer。array时候 -->
          <!-- <input type="file" id="_file1" name="_file" style="400px;height:35px;"/>
          <input type="file" id="_file2" name="_file" style="400px;height:35px;"/> -->
          <input type="submit" value="submit" style="100px;height:35px;" />
        </form>
      </div>
    </body>
    </html>
    View Code

    启动程序,打开cmd然后cd到工程目录,node app.js 


  • 相关阅读:
    input只允许输入正整数
    CSS如何作小于1PX的边
    时间戳的处理
    图片转base64上传,视频同理。
    APIcloud微信支付和支付宝支付(方案2,主要在后台进行)
    H5滑条(input type=range)
    checkbox/radio 样式修改
    APIcloud制作APP 微信支付与支付宝支付
    JS获取鼠标左(右)滑事件
    DOM(Document object madle) 文档对象模型: 元素节点 文本节点 属性节点
  • 原文地址:https://www.cnblogs.com/visonme/p/5421084.html
Copyright © 2020-2023  润新知