node.js實現formdata上傳文件

1.關于formdata

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

方法一：

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

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

<form id="myForm" name="myForm"><div><label for="username">Enter name:</label><input type="text" id="username" name="username"></div><div><label for="useracc">Enter account number:</label><input type="text" id="useracc" name="useracc"></div><div><label for="userfile">Upload file:</label><input type="file" id="userfile" name="userfile"></div> <input type="submit" value="Submit!"> </form> var myForm = document.getElementById('myForm'); formData = new FormData(myForm);

2.formdata上傳文件

目錄結構

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

客戶端代碼

<!-- index.html --><input id="file" type="file"><button id="btn">點擊上傳</button><img id="img" src="" alt=""><script>var btn = document.getElementById("btn"),file = document.getElementById("file"),img = document.getElementById("img");btn.onclick = function () {// 獲取文件var upload_file = file.files[0],formdata = new FormData(),xhr = new XMLHttpRequest();formdata.append('date',new Date().toLocaleString()); // 將文件添加到formdata對象中，（注：下面的file字段名在node中有用）formdata.append('file', upload_file);xhr.open("POST", "/upload", true);xhr.onreadystatechange = function () {if (xhr.readyState == 4 && xhr.status == 200) {img.src = xhr.responseText;}}xhr.send(formdata);}</script>

服務端代碼

// index.js var express = require("express"); var app = express(); /*1. 保存在文件夾中的文件為二進制，所以想在本地點開能預覽的，取消下面fs模塊引用的注釋2. 并在命令行中輸入 npm install fs --save */ // var fs = require("fs");var multer = require("multer"); // 這里dest對應的值是你要將上傳的文件存的文件夾 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 將具有文本域數據，如果存在的話 。（上面前端代碼中傳遞的date字段在req.body中獲取）console.log(req.body) //{ date: '2018/1/20 下午5:25:56' }// ---------- 因為保存的文件為二進制，取消下面代碼塊注釋可讓保存的圖片文件在本地文件夾中預覽 ------/*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);

接下來解釋下上述代碼

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

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

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

.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 將具有文本域數據，如果存在的話 。（上面前端代碼中傳遞的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()函數只會返回username附加的第一個值 formData.get('username'); // Returns "Chris" // getAll()函數將返回username一個數組中的兩個值： formData.getAll('username'); // Returns ["Chris", "Bob"]

更多formdata方法

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

文章都是學習過程中的總結，如果發現錯誤，歡迎留言指出 《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的node.js实现formdata上传文件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。