Nodejs學習筆記（八）--- Node.js + Express 實現上傳檔案功能（felixge/node-formidable）

阿新 • • 發佈：2019-01-12

前言

　　前面講了一個構建網站的示例，這次在此基礎上再說說web的常規功能----檔案上傳，示例以一個上傳圖片的功能為例子

　　上傳功能命名用formidable實現，示例很簡單!

　　PS：最近比較忙，距上一次更新已經比較久了^_^!

formidable簡介

　　nodejs原生實現上傳還是比較麻煩，有興趣的自已去參考一下網上有網友寫的程式碼

　　這裡選擇了formidable，也是github上同類功能模組人氣比較高的

　　優點：上傳速度比較可觀，佔用記憶體也比較低，簡單易用...

建立專案安裝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

　　安裝成功，一切準備就緒，開始完成這個功能！

實現上傳功能

<!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>

    <div id="container" class="container">
       <% if 
 (locals.success) { %> 
          <div id="alt_sucess" class="alert alert-success"> 
            <%- success %> 
          </div> 
       <% } %> 

      <% if (locals.error) { %> 
        <div id="alt_warning" class="alert alert-warning"> 
          <%= error %> 
        </div> 
      <% } %> 

      <form class="form-signin" role="form" method="post" enctype='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>
            
    </div> 
  </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 = '<div id="errorTip" class="alert alert-warning">{0}</div> ';  

            $("#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>

　　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資料夾以供檔案存放

執行結果

　　1.在app.js中新增8000埠的監聽

　　2.cd到專案根目錄，執行 node app

　　3.瀏覽器上訪問 localhost:8000

　　4.上傳圖片

　　
　　5.去上傳資料夾中檢視

　　大功告成！

部分疑惑解析

　　有一些在程式碼中有註釋的我就不解釋了

　　1.怎麼沒看到上傳？

　　注意：form.parse 再看看formidable的解釋

Automatically writing file uploads to disk

　　2.為什麼需要fs.renameSync

　　3.可不可以看到上傳進度

　　但是隻是在控制檯輸出，想在前端去顯示進度條是不行的（沒有去研究，想想別的辦法應該也可以）

　　4.檔名想命名UUID不重複，在nodejs中怎麼辦？

　　...

　　其它的留言問吧^_^!

寫在之後

　　功能比較簡單，程式碼也是示例風格，大家主要關注一下使用

　　程式碼結構優化方向：

　　1.比如檔案字尾這一類的方法可以放到一個pub.js中，此js專門用於這些公有方法

　　2.可以利於返回值的方式去返回資料，前端根據返回值做出相應的提示

　　3.可以利於jquery.form.js去提交表單，post中用res.json方法返回值，優化體驗（同樣引用這個js也會增大頁面體積）

　　....

　　總之是個小例子，大家將就著看看吧^_^!

Nodejs學習筆記（八）--- Node.js + Express 實現上傳檔案功能（felixge/node-formidable）

目錄前言　　前面講了一個構建網站的示例，這次在此基礎上再說說web的常規功能----檔案上傳，示例以一個上傳圖片的功能為例子　　上傳功能命名用formidable實現，示例很簡單! 　　PS：最近比較忙，距上一次更新已經比較久了^_^! formidable簡介　　nodejs

Nodejs學習筆記（八）—Node.js + Express 實現上傳文件功能（felixge/node-formidable）

blog args 一個 type屬性 ole java mod device 前端前言　　前面講了一個構建網站的示例，這次在此基礎上再說說web的常規功能----文件上傳，示例以一個上傳圖片的功能為例子　　上傳功能命名用formidable實現，示例很簡單! 　　P

js方法實現--上傳檔案功能js實現

unction createUploadForm(fileElementId, data, curFileList) { var id = new Date().getTime(); var formId = 'jUploadForm' + id; //給form新增一個獨一

Nordic nRF5 SDK 學習筆記之八, Nordic UART Service NUS 服務透傳

硬體: nRF52832 DK 軟體: nRF SKD Ver 15.2 官方樣例: NUS 服務端: SDK15.2\ble_peripheral\ble_app_uart &nbs

SSM 實訓筆記 -11- 使用 Spring MVC + JDBC Template 實現篩選、檢索功能（maven）

SSM 實訓筆記 -11- 使用 Spring MVC + JDBC Template 實現篩選、檢索功能（maven）本篇是新建的一個數據庫，新建的一個完整專案。本篇內容：（1）使用 Spring MVC + JDBC Template 實現資料庫查詢（2）實現對資

hadoop生態系統學習之路（三）java實現上傳檔案（本地或ftp）至hdfs

在上一篇博文中，我們講了如何編寫、執行、測試一個MR，但是hdfs上的檔案是手動執行命令從本地linux上傳至hdfs的。在真實的執行環境中，我們不可能每次手動執行命令上傳的，這樣太過繁瑣。那麼，我們可以使用hdfs提供的java api實現檔案上傳至hdfs，

node.js使用multiparty上傳文件

asc blank 部分 img 寫在前面 bsp date IE vue multiparty使用：multiparty文檔 https://www.npmjs.com/package/multiparty下面介紹一下利用formData向後臺提交圖片的過程：寫在前面的話

Node.js——異步上傳文件

formdata 處理前臺 field fields spa word fun class 前臺代碼 submit() { var file = this.$refs.fileUpload.files[0]; var formData = new For

ElasticSearch最佳入門實踐（七十）優化寫入流程實現海量磁碟檔案合併（segment merge，optimize）

每秒一個segment file，檔案過多，而且每次search都要搜尋所有的segment，很耗時預設會在後臺執行segment merge操作，在merge的時候，被標記為deleted的document也會被徹底物理刪除每次merge

vue+node.js+mysql實現視訊彈幕功能

主體html結構 <div class="vedio-container"> <div class="barrage-container-wrap" ref="barWrapper"> <div class="video-wrapper">

微信小程式上傳圖片功能（附後端程式碼）

幾乎每個程式都需要用到圖片，在小程式中我們可以通過image元件顯示圖片。當然小程式也是可以上傳圖片的，微信小程式文件也寫的很清楚。上傳圖片首先選擇圖片通過wx.chooseImage(OBJECT)實現官方示例程式碼 ? 1 2

Python模擬瀏覽器上傳檔案指令碼（Multipart/form-data格式）

http協議本身的原始方法不支援multipart/form-data請求，這個請求由原始方法演變而來的。 multipart/form-data的基礎方法是post，也就是說是由post方法來組合實現的，與post方法的不同之處：請求頭，請求體。 mult

node.js中實現使用者註冊的功能

終於決定要實現註冊的功能了，開啟虛擬機發現，mongodb不能啟動，我真是無語到了極點，谷歌了好久，原來是因為老是直接關閉虛擬機器造成的，沒辦法，刪除.lock檔案重啟就可以了，別人還要 --repair一下，我直接略過，粗學者，就懂那麼多啊，不過我也漲記性了

iOS上傳檔案或base64（圖片）之AFNetworking 3.0+上傳檔案上傳圖片

1. base64 上傳圖片 /** * 上傳圖片到伺服器 * * @param image * @param photoID * @param photoType */ - (

AJAX實現上傳進度條（Django）

昨天研究了一天檔案上傳進度條的實現，折騰了一天終於是完成了，期間遇到了各種BUG，讓人不禁淚落。這裡，我們將使用最少量的AJAX來實現這個功能，沒有任何對瀏覽器支援性的檢測，這樣更容易明白。還有一點需要說明的是，後臺也是應該來摻和一腳（配合）的，當然，非常簡單，只要確認接

前端實現多圖片上傳檢視功能（帶UI實現）

由於業務需求，需要實現多圖片的上傳，並且能夠實時檢視使用者上傳的圖片列表。因此從網上找了一個不錯的外掛，並和bootstrap UI進行的相容。基本能夠滿足需求。下面就是我的實現過程（PS：本人前端了解不太深，所以基本是實現了功能… UI沒有太多考慮…）

.NET Core API框架實戰（三）使用Swagger文件實現上傳檔案

介紹在Swagger中利用 IOperationFilter 操作來實現檔案上傳檔案上傳 1、介紹寫過介面的朋友都知道，除錯、維護介面是一件非常重要的一件事；swagger是一款非常不錯的介面文件工具，那麼在本期中，我們就用swagge

js jquery驗證上傳檔案的格式和大小

// 驗證附件格式和大小 function confirmData() { var flag = true; var message = ""; var errorSize = ""; var fileSuffix = $("#fileSuffix").val(

Javascript js結合axios上傳檔案阿里雲oss 親測有效

本案例區別與網上其他案例，採用vue-axios，先獲取臨時授權，授權成功後上傳圖片到OSS，僅供參考，各家公司的後臺配置都不相同 <!DOCTYPE html> <html lang="en"> <head>

jquery.form.js ajax提交上傳檔案

轉：https://www.cnblogs.com/DylanZ/p/6019611.html 專案中最近有用到表單提交，是帶有圖片上傳的表單錄入，需要ajax非同步提交，網上找了好多例子都是隻能提交上傳欄位一個資訊的，這裡整理一下。表單裡有普通文字資訊欄位也有圖片上

Nodejs學習筆記（八）--- Node.js + Express 實現上傳檔案功能（felixge/node-formidable）

目錄

前言

formidable簡介

建立專案安裝formidable

實現上傳功能

執行結果

部分疑惑解析

寫在之後

相關推薦