JQ中使用FormData+Ajax发送请求及使用express接收处理FormData数据

最近写大创项目的时候，要做登录功能，考虑到之后还需要上传头像图片，因此决定使用FormData发送表单请求。项目中用的是JQ封装的ajax，配合FormData使用的时候出现了一些问题。

首先这里就不再说明FormData的作用和用法，如果不清楚的可以看看这篇文章：FormData对象的使用。

1. 可能出现的问题

JQ中初始化FormData对象

在JQ中，如果想使用一个已经存在的表单初始化FormData对象，在选中这个表单DOM的时候，不能使用JQ自带的$('form')方法，而是应该使用JS原生写法：

//错误的写法：let formData = new FormData($('form'));//正确的写法：let formData = new FormData(document.querySelector('form'));

如果使用JQ的选择器写法，那么会报错，大致意思应该是FormData初始化的参数不正确。使用JS原生写法就没问题了。

配合ajax无法发送请求

如果在JQ封装的ajax中发送FormData数据，发生报错：TypeError: 'append' called on an object that does not implement interface FormData。加入这两行：

processData: false,contentType: false

2. 完整的发送请求代码

//使用Formdata提交登录信息//初始化表单let formData = new FormData(document.querySelector('form'));//有需要的话可以修改formdata数据//formdata.set('identiy', identiy);//发送ajax请求$.ajax({url: './login',type: 'post',data: formData,processData: false, //不处理数据contentType: false, //不设置内容类型success: function (data) {console.log(data)},error: (err) => {console.log(err)}})

3. 服务器端使用express接收处理FormData数据

需要安装express-formidable模块：

npm i express-formidable

使用：

const express = require('express');const app = express();//引入模块const formidable = require('express-formidable');//挂载app.use(formidable());//接收请求router.post('/formdata',(req,res,next)=>{console.log(req.fields); // formData中的参数console.log(req.files); // formData中的文件})