formidable处理提交的表单或文件的简单介绍
一般來說，客戶端向服務端提交數(shù)據(jù)有GET和POST這兩種方式，在之前的文章node.js當中的http模塊與url模塊的簡單介紹當中我們可以知道通過req.url與url模塊的配合處理可以快速得到客戶端通過GET方式向服務端提交的數(shù)據(jù)。而原生的node.js在處理客戶端以POST方式提交的數(shù)據(jù)時，比較復雜，要寫兩個監(jiān)聽，并且要處理上傳的圖片、文件也比較艱難。故我們常用第三方模塊包formidable來處理客戶端以POST方式提交的表單、文件、圖片等。
一、formidable處理POST方式提交的表單數(shù)據(jù)
1、下載并引包
在當前的項目文件夾下，用命令-> npm install formidable?來在當前文件夾下載formidable。再通過const formidable = require('formidable');來引包。
2、創(chuàng)建基本的表單結(jié)構(gòu)
我們新建一個表單頁面form.html放在服務端，與主文件1.js放在同一個目錄下。如下圖所示：
在主文件1.js當中，我們設計路由為，當用戶訪問根目錄時，呈遞該表單頁面，當用戶完成表單信息填寫，用submit進行提交之后，默認跳轉(zhuǎn)至路由http://192.168.155.1:3000/dopost，(一定要加上指定的端口號)，則我們設計在這一條路由當中來使用formidable來進行處理。則1.js主文件的骨架代碼為：
const formidable = require('formidable'); const fs = require('fs'); const path = require('path'); const http = require('http'); var server = http.createServer((req,res)=>{if(req.url == '/'){var target = path.join(__dirname,'./form.html');fs.readFile(target,(err,data)=>{if(err) throw err;res.writeHead(200,{"Content-Type":"text/html;charset=UTF8"});res.end(data);});}else if(req.url == '/dopost' && req.method.toLowerCase() == 'post'){}else{res.writeHead(404,{"Content-Type":"text/html;charset=UTF8"});res.end("找不到該頁面！");} }); server.listen(3000,'192.168.155.1'); 3、使用formidable來處理表單數(shù)據(jù)常用代碼段為
var form = new formidable.IncomingForm(); form.parse(req,function(err,fields,files){});其中當服務端全部接收完客戶端用post方式提交的表單數(shù)據(jù)之后，觸發(fā)執(zhí)行該回調(diào)函數(shù)。以post方式提交的表單域數(shù)據(jù)都放在fields這個對象當中，以post方式上傳的文件、圖片等文件域數(shù)據(jù)都放在files這個對象當中。
則我們在第二條路由選擇的分支當中的代碼示例為：
else if(req.url == '/dopost' && req.method.toLowerCase() == 'post'){var form = new formidable.IncomingForm();form.parse(req,function(err,fields,files){if(err) throw err;console.log(fields);res.writeHead(200,{"Content-Type":"text/html;charset=UTF8"});res.end('表單提交成功！');}); }此時完成表單數(shù)據(jù)填寫并提交之后，結(jié)果為：
二、formidable處理POST方式上傳的文件或圖片
通過上述方式進行下載與引包之后，form.html文件與主文件1.js仍處于同一目錄下，form.html當中的示例代碼為：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>form表單</title> </head> <body><form action="http://192.168.155.1:3000/dopost" method="POST" enctype="multipart/form-data"><p><input type="file" name="uploadImg"></p><p><input type="submit" value="提交"></p></form> </body> </html>當表單提交的過程中涉及文件或圖片上傳，則一定要設置表單頭，即在form標簽上加上固定寫法的屬性為enctype="multipart/form-data"，否則文件或圖片會上傳失敗。其中<input type="file" name="uploadImg">，當中的name屬性一定要賦值。
其中主文件1.js的骨架代碼也與上述的相似。當要使用formidable來處理上傳的圖片時，常用的代碼段為：
var form = new formidable.IncomingForm(); form.uploadDir = targetFile; form.parse(req,function(err,fields,files){});其中targetFile為一個自定義的變量，用于設置文件或圖片上傳的存放路徑，為絕對物理路徑。該目標地址的文件夾必須能實現(xiàn)存在，這樣才能確保文件能順利上傳。其中當服務端全部接收完客戶端用post方式提交的文件或圖片之后，觸發(fā)執(zhí)行該回調(diào)函數(shù)。以post方式提交的表單域數(shù)據(jù)都放在fields這個對象當中，以post方式上傳的文件、圖片等文件域數(shù)據(jù)都放在files這個對象當中。則我們在第二條路由選擇的分支當中的代碼示例為：
else if(req.url == '/dopost' && req.method.toLowerCase() == 'post'){var form = new formidable.IncomingForm();var targetFile = path.join(__dirname,'./upload');form.uploadDir = targetFile;form.parse(req,function(err,fields,files){if(err) throw err;console.log(files);res.writeHead(200,{"Content-Type":"text/html;charset=UTF8"});res.end('表單提交成功！');}); }在完成圖片的選擇與上傳之后，結(jié)果為：
此時可以看到在主文件1.js的同一目錄下的upload文件夾當中多了一個隨機名字，并且沒有后綴名的文件。由于沒有后綴名，所以該圖片在編輯器當中無法正常顯示。
我們可以在接收到上傳的圖片之后，使用fs.rename()方法對其進行改名的操作，使其上傳之后的文件名與之前的保持一致，并且包含后綴名的部分。
我們從控制臺打印的信息可以看出其中files.uploadImg.path代表該圖片上傳之后存放的絕對物理路徑。其中files.uploadImg.name代表該圖片原來的文件名部分（包含擴展名的信息）。我們加入了上傳改名的功能之后，第二條路由選擇分支當中的示例代碼為：
?
轉(zhuǎn)載于:https://www.cnblogs.com/guchengnan/p/10665732.html
總結(jié)
以上是生活随笔為你收集整理的formidable处理提交的表单或文件的简单介绍的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 2018-2019-2 20175305
- 下一篇： UVa10129（还没ac）各种re，o