摘要：對象包含表單的文本域信息，或?qū)ο蟀瑢ο蟊韱紊蟼鞯奈募畔ⅰＪ俏募男畔⑶岸藗鬟f的文件類型在中獲取將具有文本域數(shù)據(jù)，如果存在的話。

XMLHttpRequest Level 2 添加了一個新的接口——FormData。利用 FormData 對象，我們可以通過 JavaScript 用一些鍵值對來模擬一系列表單控件，我們還可以使用 XMLHttpRequest 的 send() 方法來異步的提交表單。與普通的 Ajax 相比，使用 FormData 的最大優(yōu)點(diǎn)就是我們可以異步上傳二進(jìn)制文件。
FormData的api

方法一：

創(chuàng)建一個空FormData對象：
var formData = new FormData()
使用FormData.append添加一個鍵/值對：
formData.append("username", "Chris");

方法二：利用form表單傳遞給formdata

  

    Enter name:
    
  
  

    Enter account number:
    
  
  

    Upload file:
    
  

var myForm = document.getElementById("myForm");
formData = new FormData(myForm);

目錄結(jié)構(gòu)

.
├── index.js
├── node_modules
├── package.json
└── public
    ├── index.html
    └── uploads

客戶端代碼

 
    
    點(diǎn)擊上傳
    
    

服務(wù)端代碼

// index.js
var express = require("express");
var app = express();
/*
    1. 保存在文件夾中的文件為二進(jìn)制，所以想在本地點(diǎn)開能預(yù)覽的，取消下面fs模塊引用的注釋
    2. 并在命令行中輸入 npm install fs --save
*/
// var fs = require("fs");

var multer = require("multer");
// 這里dest對應(yīng)的值是你要將上傳的文件存的文件夾
var upload = multer({dest:"./public/uploads"});
app.use(express.static("./public"));
app.post("/upload", upload.single("file"),(req, res) => {
    
    // req.file 是 "file" 文件的信息 （前端傳遞的文件類型在req.file中獲取）
    // req.body 將具有文本域數(shù)據(jù)，如果存在的話  。（上面前端代碼中傳遞的date字段在req.body中獲取）
    console.log(req.body) //{ date: "2018/1/20 下午5:25:56" }

    // ---------- 因?yàn)楸４娴奈募槎M(jìn)制，取消下面代碼塊注釋可讓保存的圖片文件在本地文件夾中預(yù)覽 ------
    /*
    var file_type;
    if (req.file.mimetype.split("/")[0] == "image") file_type = "." + req.file.mimetype.split("/")[1];
    if (file_type) {
        fs.rename(req.file.path, req.file.path + file_type, function (err, doc) {
            if (err) {
                console.error(err);
                return;
            }
            console.log("55");
            res.send("./uploads/" + req.file.filename + file_type)
        })
        return;
    }
    */
    // ---------------------
    
    res.send("./uploads/" + req.file.filename)
})
app.listen(9999);

接下來解釋下上述代碼

上面的例子是上傳圖片，服務(wù)端傳回圖片路徑進(jìn)行展示。上傳其他文件同理！

index.js中依賴express、multer 可以通過npm install express multer --save進(jìn)行安裝，當(dāng)然你也可以不使用express。
接下去重點(diǎn)講述下multer：
1.安裝：
npm install --save multer
2.使用：
multer(opts)

Multer 接受一個 options 對象，其中最基本的是 dest 屬性，這將告訴 Multer 將上傳文件保存在哪。如果你省略 options 對象，這些文件將保存在內(nèi)存中，永遠(yuǎn)不會寫入磁盤。通常，只需要設(shè)置 dest 屬性 像這樣：
var upload = multer({ dest: "uploads/" })   // dest對應(yīng)的值就是你想文件存儲的文件夾

.single(fieldname)

接受一個以 fieldname 命名的文件。這個文件的信息保存在 req.file。（這里的fieldname指的是formdata.append("file",文件）中的"file"字段。
其他方法詳見multer文檔。

Multer 會添加一個 body 對象 以及 file 或 files 對象 到 express 的 request 對象中。body 對象包含表單的文本域信息，file 或 files 對象包含對象表單上傳的文件信息。

app.post("/upload", upload.single("file"),(req, res) => {
    // req.file 是 "file" 文件的信息 （前端傳遞的文件類型在req.file中獲取）
    // req.body 將具有文本域數(shù)據(jù)，如果存在的話 。（上面前端代碼中傳遞的date字段在req.body中獲取）
    console.log(req.body) // { date: "2018/1/20 下午5:25:56" }
    res.send("./uploads/"+req.file.filename)
})

一、formdata在控制臺打印為空

可通過下面方法獲取：

var formData = new FormData();
formData.append("username", "Chris");
formData.append("username", "Bob");
// get()函數(shù)只會返回username附加的第一個值
formData.get("username"); // Returns "Chris"
// getAll()函數(shù)將返回username一個數(shù)組中的兩個值：
formData.getAll("username"); // Returns ["Chris", "Bob"]

更多formdata方法

二、如果formdata添加文件成功了的話，還是上傳失敗，可以看看頭部是否為multipart/form-data

文章都是學(xué)習(xí)過程中的總結(jié)，如果發(fā)現(xiàn)錯誤，歡迎留言指出