formidable處理提交的表單或文件的簡單介紹

時間 2019-12-07

原文原文鏈接

通常來講，客戶端向服務端提交數據有GET和POST這兩種方式，在以前的文章node.js當中的http模塊與url模塊的簡單介紹當中咱們能夠知道經過req.url與url模塊的配合處理能夠快速獲得客戶端經過GET方式向服務端提交的數據。而原生的node.js在處理客戶端以POST方式提交的數據時，比較複雜，要寫兩個監聽，而且要處理上傳的圖片、文件也比較艱難。故咱們經常使用第三方模塊包formidable來處理客戶端以POST方式提交的表單、文件、圖片等。html

1、formidable處理POST方式提交的表單數據

一、下載並引包

在當前的項目文件夾下，用命令-> npm install formidable 來在當前文件夾下載formidable。再經過const formidable = require('formidable');來引包。node

二、建立基本的表單結構

咱們新建一個表單頁面form.html放在服務端，與主文件1.js放在同一個目錄下。以下圖所示：typescript

在主文件1.js當中，咱們設計路由爲，當用戶訪問根目錄時，呈遞該表單頁面，當用戶完成表單信息填寫，用submit進行提交以後，默認跳轉至路由http://192.168.155.1:3000/dopost，(必定要加上指定的端口號)，則咱們設計在這一條路由當中來使用formidable來進行處理。則1.js主文件的骨架代碼爲：npm

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');

三、使用formidable來處理表單數據

經常使用代碼段爲編輯器

var form = new formidable.IncomingForm();
form.parse(req,function(err,fields,files){});

其中當服務端所有接收完客戶端用post方式提交的表單數據以後，觸發執行該回調函數。以post方式提交的表單域數據都放在fields這個對象當中，以post方式上傳的文件、圖片等文件域數據都放在files這個對象當中。函數

則咱們在第二條路由選擇的分支當中的代碼示例爲：post

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('表單提交成功！');
    });
}

此時完成表單數據填寫並提交以後，結果爲：ui

2、formidable處理POST方式上傳的文件或圖片

經過上述方式進行下載與引包以後，form.html文件與主文件1.js仍處於同一目錄下，form.html當中的示例代碼爲：url

<!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屬性必定要賦值。spa

其中主文件1.js的骨架代碼也與上述的類似。當要使用formidable來處理上傳的圖片時，經常使用的代碼段爲：

var form = new formidable.IncomingForm();
form.uploadDir = targetFile;
form.parse(req,function(err,fields,files){});

其中targetFile爲一個自定義的變量，用於設置文件或圖片上傳的存放路徑，爲絕對物理路徑。該目標地址的文件夾必須能實現存在，這樣才能確保文件能順利上傳。其中當服務端所有接收完客戶端用post方式提交的文件或圖片以後，觸發執行該回調函數。以post方式提交的表單域數據都放在fields這個對象當中，以post方式上傳的文件、圖片等文件域數據都放在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('表單提交成功！');
        });
}

在完成圖片的選擇與上傳以後，結果爲：

此時能夠看到在主文件1.js的同一目錄下的upload文件夾當中多了一個隨機名字，而且沒有後綴名的文件。因爲沒有後綴名，因此該圖片在編輯器當中沒法正常顯示。

咱們能夠在接收到上傳的圖片以後，使用fs.rename()方法對其進行更名的操做，使其上傳以後的文件名與以前的保持一致，而且包含後綴名的部分。
咱們從控制檯打印的信息能夠看出其中files.uploadImg.path表明該圖片上傳以後存放的絕對物理路徑。其中files.uploadImg.name表明該圖片原來的文件名部分（包含擴展名的信息）。咱們加入了上傳更名的功能以後，第二條路由選擇分支當中的示例代碼爲：

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;
            var oldpath = files.uploadImg.path;
            var newpath = path.join(path.dirname(oldpath),files.uploadImg.name);
            fs.rename(oldpath,newpath,(err)=>{
                if(err) throw err;
                res.writeHead(200,{"Content-Type":"text/html;charset=UTF8"});
                res.end('文件上傳並更名成功！');
            })
        });
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。