美文网首页Node.js专题
Node.js的文件上传

Node.js的文件上传

作者: Mike的读书季 | 来源:发表于2016-09-19 15:24 被阅读838次

    0.目标

    在Express中实现单文件上传。

    【参考代码】


    1.部署Express

    如果不知道如何部署,可参照: 部署Express


    2.服务器端

    这里要用到multer中间件,这个需要自行安装:

    npm install multer --save

    在routes/index.js中引用multer,另外, 因为需要用到文件系统,所以还要引用fs模块:

    var multer  = require('multer');
    var fs = require("fs");
    

    增加一个路由,用来显示页面:

    /* 浏览器输入地址(如127.0.0.1:3000/upload)后,显示views/upload页面,此页面使用默认引擎(这里是jade)渲染 */
    router.get('/upload', function(req, res, next) {
      res.render('upload', {msg: "请先上传"});
    });
    

    增加一个路由,用来处理上传操作:

    var upload = multer({ dest: '/tmp/' })
    router.post('/file_upload', upload.array('image'), function(req, res, next) {
    
        console.log(req.files[0]);  // 上传的文件信息
        if(undefined == req.files[0])
        {
            res.end( JSON.stringify( {message:"文件不存在!"} ) );
        }
        
        var response = {};
    
        var des_file = "./files/" + req.files[0].originalname;
        fs.readFile( req.files[0].path, function (err, data) {
            fs.writeFile(des_file, data, function (err) {
                if( err ){
                    console.log( err );
                    response = {
                        message:'File uploaded failed', 
                        filename:err
                    };
                }else{
                    response = {
                        message:'File uploaded successfully', 
                        filename:req.files[0].originalname
                    };
                }
                console.log( response );
                res.end( JSON.stringify( JSON.stringify( response ) ) );
            });
        });
    });
    

    注意
    在根目录下创建一个文件夹,名称是files。如果没有先创建,上传文件时会报错。


    3.客户端页面

    在views文件夹下,添加一个文件upload.jade

    doctype html
    html
        head
            title= title
            link(rel='stylesheet', href='/stylesheets/style.css')
        body
            h1 Express的文件上传
            h3 选择一个文件上传
                form(action="/file_upload" method="post" enctype="multipart/form-data")
                    input(type="file" name="image" size="50")
                    input(type="submit" value="上传文件")
            
            h3 消息:#{msg}
    

    4.测试

    运行服务,在浏览器里输入:

    http://127.0.0.1:3000/upload

    浏览器中选择一个文件上传:

    选择上传文件

    上传结果:


    上传文件的结果

    服务端打印:

    服务端打印

    原创文章,未经许可,请勿转载
    作者:Mike的读书季
    日期:2016.09.19
    QQ:1139904786
    Blog:http://blog.csdn.net/kkdestiny

    相关文章

      网友评论

        本文标题:Node.js的文件上传

        本文链接:https://www.haomeiwen.com/subject/pqknettx.html