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. 参考

源代码