1. FormData的作用

1.1 將Form表單元素,轉換成表單對象

在使用Ajax進行表單提交的時候,采用原生的js獲取dom,然后添加屬性.當表單項很多的時候,代碼會很多.不利于后期閱讀、維護.
這時,可以使用FormData對象,將HTML中的表單元素轉換成表單對象,如下:

<!-- 表單對象 -->
<form id="form"><input type="text" name="username" /><input type="text" name="password" /><input type="button" />
</form>

• 將HTML中的DOM元素轉換成表單對象,

var form = document.getElementById('form');
var formData = new FormData(form);// 使用ajax傳遞表單對象
var xhr = new XMLHttpRequest();
xhr.open('post', 'http://localhost:3000/formData')
xhr.send(formData);

• 此時,服務器端需要使用 formidable 進行接收
• npm i formidable

const express = require('express')
const fomidable = require('formidable');
const app = express();
app.post('/formData',(req, res)=>{// 創建 formidable 實例const form = new formidable.IncomingForm();form.parse(req, (err, fields, files) =>{// 傳遞的參數都在 fields 中	res.send(fields)})
})

1.2 FormData實現二進制文件上傳

• 下面的樣式用到了bootstrap,不導入也沒影響…
• 思路如下:

1. 獲取input表單元素,并監聽它的改變事件(file.onchange)
2. 當input改變時,創建一個FormData實例(new FormData())
3. 將上傳的文件添加到實例中(formData.append())
4. 將文件上傳到服務器(xhr.send)
5. 服務器端接收到上傳的文件,將其保存在/public/uploads中
6. 服務器返回ok

1.2.1 文件上傳的表單控件

<div class="container"><div class="form-group"><label>請選擇文件</label><input type="file" id="file" />
</div>

1.2.2 [客戶端]文件上傳

<script type="text/javascript">var file = document.getElementById('file');// 監聽文件上傳file.onchange = function(){var formData = new FormData();// 將文件的二進制信息(files)放在formData載體中,并取名classNameformData.append('className', this.files[0]);var xhr = new XMLHttpRequest();xhr.open('post', 'http://localhost:3000/uploads');xhr.send(formData);xhr.onload = function () {// 上傳成功,收到服務器端的響應if(xhr.status == 200){console.log(xhr.responseText);}}}
</script>

1.2.3 [服務端]文件上傳

• 服務端監聽路由upload
• 使用formidable,來獲取傳遞的表單參數
• 設置保存的路徑form.uploadDir
• 返回信息

const express = require('express');
const formidable = require('formidable');
const path = require('path');
const app = express();
app.post('/upload', (req, res)=>{const form = new formidable.IncomingForm();// 配置表單的屬性form.uploadDir = path.join(__dirname, 'public', ''); // 文件存儲在服務端的路徑form.keepExtensions = true; // 文件保留后綴名// 表單接收 客戶端的 FormData 參數form.parse(req,(err, fields, files)=>{res.send('ok')})
})

2. 參考

源代碼