亚洲另类97色波,四季久久免费一区二区三区四区,丰满蜜桃精品视频网,国产在线观看无码九色8X视频亚洲中文字幕久久精品无码喷水_国产精品无码一区二区

使用Node.js的formidable模塊實現(xiàn)文件上傳

2023-2-10    前端達人

在我上一篇寫的Node.js實現(xiàn)簡單的POST請求
里面POST請求接受參數需要寫兩個事件,這難免有些不太方便
在這里插入圖片描述

如果我們用formidable來接受參數的話,會變得特別方便。

下面我們來寫一個Demo,來利用formidable來實現(xiàn)圖片上傳

1.下面來看一眼 目錄結構

在這里插入圖片描述

2.先來寫一個簡單的前端上傳頁面

index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <form class="upload" action="shangchuan" enctype="multipart/form-data" method="post"><!--  上傳接口是/shangchuan -->
        <p>
            請上傳一個頭像
            <input type="file" name="wenjian">
        </p>
        <p>
            <input type="submit" value="提交">
        </p>
    </form>
</body>
</html> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

2.package.json 文件

安裝依賴,執(zhí)行下面這三句npm語句

npm install finalhandler --save
npm install serve-static --save
npm install formidable --save

之后會自動生成下面這個package.json文件

{
  "dependencies": {
    "finalhandler": "^1.1.1",
    "formidable": "^1.2.1",
    "serve-static": "^1.13.2"
  }
} 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

3.post.js

var finalhandler = require('finalhandler')
var http = require('http')
var serveStatic = require('serve-static')
var url = require('url')
var fs = require('fs')
var querystring = require('querystring')
var formidable = require('formidable')
var path = require('path')
// Serve up public/ftp folder
//配置靜態(tài)資源服務器,將public文件夾靜態(tài)化出來

var serve = serveStatic('public', {'index': ['index.html', 'index.htm']})

// Create server
var server = http.createServer(function onRequest (req, res) {
    //路由
    var pathname = url.parse(req.url).pathname;
    if(pathname == '/shangchuan'){
        //創(chuàng)建一個表單的實例,formidable
        var form = new formidable.IncomingForm();
        //設置上傳的文件存放在哪里
        form.uploadDir = './uploads';
        //處理表單
        form.parse(req,(err,fields,files) => {
            //fields 表示普通控件
            //files 表示文件控件
            if(!files.wenjian){
                return;
            }
            if(!files.wenjian.name){
                return;
            }
            var extname = path.extname(files.wenjian.name);獲取文件的擴展名,便于下面修改上傳后的文件名字
            //改名
            fs.rename(files.wenjian.path, files.wenjian.path + extname,() => {
                res.end('上傳成功')
            })
            // console.log(fields);
        })
        return;
    }
    serve(req, res, finalhandler(req, res))
})

// Listen
server.listen(3000);
console.log('服務已經啟動在3000端口'); 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47

4.最后找到post文件的目錄,然后開始node post.js

會看到這個頁面

在這里插入圖片描述

然后選擇任意文件點擊提交
會發(fā)現(xiàn)在很短的時間內你的文件會提交成功在你的uploads文件夾下。




藍藍設計建立了UI設計分享群,每天會分享國內外的一些優(yōu)秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯(lián)系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯(lián)系,我們立即更正或刪除。


藍藍設計www.teruid.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

日歷

鏈接

個人資料

藍藍設計的小編 http://www.teruid.com

存檔