javascript代码实例教程-Nodejs学习笔记(八)--- Node.js + Express 实现上传文件功能(felixge/node-formidable)

发布时间:2019-01-29 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-Nodejs学习笔记(八)--- Node.js + Express 实现上传文件功能(felixge/node-formidable)脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 创建项目安装formidable

 

   1.创建项目sampleUpload

 

cd 工作目录

 

exPress -e sampleUpload

 

  2.修改package.json文件,添加formidable依赖项

 

复制代码

{

  "name": "application-name",

  "version": "0.0.1",

  "PRivate": true,

  "scripts": {

    "start": "node ./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",

    "formidable" : "latest"

  }

}

复制代码

  3.安装依赖项

 

cd sampleUpload && npm install

 

   

 

  安装成功,一切准备就绪,开始完成这个功能!

 

实现上传功能

 

  1.index.ejs文件中构建表单并实现前端验证(样式使用和https://www.cnblogs.COM/zhongweiv/p/nodejs_express_webapp.htML 一致)

 

复制代码

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=Edge">

    <meta name="viewport" content="width=device-width, inITial-scale=1.0">       

    <title><%= title %></title>

  

      <link rel="stylesheet" type="text/css" href="/stylesheets/bootstrap.min.css" />

    <link rel="stylesheet" type="text/css" href="/stylesheets/signin.css" />

  </head>

 

  <body>

 

    <p id="container" class="container">

       <% if (locals.success) { %> 

          <p id="alt_sucess" class="alert alert-success"> 

            <%- success %> 

          </p> 

       <% } %> 

 

      <% if (locals.error) { %> 

        <p id="alt_warning" class="alert alert-warning"> 

          <%= error %> 

        </p> 

      <% } %> 

 

      <form class="form-signin" role="form" method="post" enctype=&#39;multipart/form-data'>

        <h2 class="form-signin-heading">上传文件</h2>

        <input id="fulAvatar" name="fulAvatar" type="file" class="form-control" />     

        <br/>

        <button id="BTnSub" class="btn btn-lg btn-Primary" type="submit">上 传</button>

      </form>

            

    </p> 

  </body>

</html>

 

<script src="/javascripts/jquery-1.11.1.min.js" type="text/javascript"></script>

 

<script type="text/javascript">

     String.prototype.format = function (args) {

            VAR result = this;

            if (arguments.length > 0) {

                if (arguments.length == 1 && typeof (args) == "object") {

                    for (var key in args) {

                        if (args[key] != undefined) {

                            var reg = new RegExp("({" + key + "})", "g");

                            result = result.replace(reg, args[key]);

                        }

                    }

                }

                else {

                    for (var i = 0; i < arguments.length; i++) {

                        if (arguments[i] != undefined) {

                            var reg = new RegExp("({)" + i + "(})", "g");

                            result = result.replace(reg, arguments[i]);

                        }

                    }

                }

            }

            return result;

    }

 

    $(function(){

        $('#btnSub').on('click',function(){           

            var fulAvatarVal = $('#fulAvatar').val(),  

                errorTip = '<p id="errorTip" class="alert alert-warning">{0}</p> ';  

 

            $("#errorTip,#alt_warning").remove();

            

            if(fulAvatarVal.length == 0)

            {

                $("#container").prepend(errorTip.format('请选择要上传的文件'));                                

                return false;

            }

 

           var extName = fulAvatarVal.substring(fulAvatarVal.lastIndexOf('.'),fulAvatarVal.length).toLowerCase();

 

            if(extName != '.png' && extName != '.jpg'){

               $("#container").prepend(errorTip.format('只支持png和jpg格式图片'));                             

               return false;                

            }

            

            return true;                

        })

    });

 

</script>

复制代码

 

 

  这里一定要注意表单的enctype属性,这个就不多作解释了,如果是初次接触,看看https://www.w3school.com.cn/tags/att_form_enctype.asp

 

  

 

  2.实现index.js中上传逻辑

 

复制代码

var express = require('express')

    router = express.Router(),    

    formidable = require('formidable'),

      fs = require('fs'),

      TITLE = 'formidable上传示例',

    AVATAR_UPLOAD_FOLDER = '/avatar/'

 

/* GET home page. */

router.get('/', function(req, res) {

  res.render('index', { title: TITLE });

});

 

router.post('/', function(req, res) {

 

  var form = new formidable.IncomingForm();   //创建上传表单

      form.encoding = 'utf-8';        //设置编辑

      form.uploadDir = 'public' + AVATAR_UPLOAD_FOLDER;     //设置上传目录

      form.keepextensions = true;     //保留后缀

      form.maxFieldsSize = 2 * 1024 * 1024;   //文件大小

 

    form.parse(req, function(err, fields, files) {

 

        if (err) {

          res.locals.error = err;

          res.render('index', { title: TITLE });

          return;        

        }  

       

        var extName = '';  //后缀名

        switch (files.fulAvatar.type) {

            case 'image/pjpeg':

                extName = 'jpg';

                break;

            case 'image/jpeg':

                extName = 'jpg';

                break;         

            case 'image/png':

                extName = 'png';

                break;

            case 'image/x-png':

                extName = 'png';

                break;         

        }

 

        if(extName.length == 0){

              res.locals.error = '只支持png和jpg格式图片';

              res.render('index', { title: TITLE });

              return;                   

        }

 

        var avatarName = Math.random() + '.' + extName;

        var newPath = form.uploadDir + avatarName;

 

        console.LOG(newPath);

        fs.renameSync(files.fulAvatar.path, newPath);  //重命名

    });

 

    res.locals.success = '上传成功';

    res.render('index', { title: TITLE });      

});

 

module.exports = router;

复制代码

  

 

  注意:在Public文件夹中创建avatar文件夹以供文件存放

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-Nodejs学习笔记(八)--- Node.js + Express 实现上传文件功能(felixge/node-formidable)全部内容,希望文章能够帮你解决javascript代码实例教程-Nodejs学习笔记(八)--- Node.js + Express 实现上传文件功能(felixge/node-formidable)所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。