javascript - 如何使用 expressJS 处理 Fetch api formData 提交
问题描述
因此,我尝试将 fetch api post 请求和 formData 提交到使用expressJS
但提交后返回未定义的 API 中,但是当我尝试使用邮递员时,它成功接收到数据。我想使用 fetch api 在邮递员中复制场景,下面是我的代码。
获取 API
submit.addEventListener('click', ()=> {
let formData = new FormData();
let fname = document.querySelector('#fname').value;
let lname = document.querySelector('#lname').value;
let email = document.querySelector('#email').value;
let gender = document.querySelector('#gender').value;
formData.append('fname', fname);
formData.append('lname', lname);
formData.append('email', email);
formData.append('gender', gender);
fetch('http://localhost:5000/api/members', {
method: 'POST',
body: formData,
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
}
});
});
我的 ExpressJS API 代码
app.use(cors()); // installed cors just incase
app.use(express.json());
app.use(express.urlencoded({extended: true}));
app.post('/api/members', (req, res)=> {
var fname = req.body.fname;
var lname = req.body.lname;
var email = req.body.email;
var gender = req.body.gender;
console.log(req.body) // i added a consolelog to show body
connection
.query(`INSERT INTO userdata (first_name, last_name, email, gender)VALUES('${fname}','${lname}','${email}','${gender}')`,(err, rows, fields) => {
if(err) throw err
res.json({msg: `1 rows was inserted`});
});
});
我的邮递员设置是 POST->BODY->x-www-form-urlencoded
编辑
我在 express 上包含了一个 console.log(req.body) 来显示它得到了什么,输出如下。
[Object: null prototype] {
'-----------------------------47133174525661\r\nContent-Disposition: form-data; name': '"fname"\r\n' +
'\r\n' +
'dau\r\n' +
'-----------------------------47133174525661\r\n' +
'Content-Disposition: form-data; name="lname"\r\n' +
'\r\n' +
'duiasd\r\n' +
'-----------------------------47133174525661\r\n' +
'Content-Disposition: form-data; name="email"\r\n' +
'\r\n' +
'test@email.com\r\n' +
'-----------------------------47133174525661\r\n' +
'Content-Disposition: form-data; name="gender"\r\n' +
'\r\n' +
'Female\r\n' +
'-----------------------------47133174525661--\r\n'
}
解决方案
也许你可以试试下面的代码:
在您的 Fetch API 中:
submit.addEventListener('click', ()=> {
let fname = document.querySelector('#fname').value;
let lname = document.querySelector('#lname').value;
let email = document.querySelector('#email').value;
let gender = document.querySelector('#gender').value;
let formData = { fname, lname, email, gender };
fetch('http://localhost:5000/api/members', {
method: 'POST',
body: JSON.stringify(formData),
headers: {
'Content-Type': 'application/json'
// 'Content-Type': 'application/x-www-form-urlencoded',
},
});
});
您可以在此处阅读文档。
现在,你可以console.log()
先。
app.post('/api/members', (req, res)=> {
console.log(req.body);
// do some stuff here
});
我希望它可以帮助。
推荐阅读
- python - 如何求解非平方线性方程组?
- kubernetes - 多个 Kubernetes 集群
- jssor - 如何使用锚标记包装 JSSOR 图像以超链接单个图像?
- java - 导航到片段时重置底部导航视图中的选择
- javascript - 如何将字符串的所有字符大写。像手机键盘
- windows - java.io.IOException:无法运行程序“cmd”
- git - Git:如何从本地更改列表(而不是暂存列表)中选择性地删除某些文件而不从索引中删除?
- directive - nuxtjs:全局客户指令无法通过插件数组解析
- java - 在类之间发送令牌
- asp.net-mvc - 如何使用 Entity Framework Code First 删除多对多自动生成的表