[英]How to handle Fetch api formData submit using expressJS
So i am trying to submit fetch api post request and formData into a API that was made using expressJS
but it returns undefined after submitting, but when i tried to use postman it received the data successfully.因此,我尝试将 fetch api post 请求和 formData 提交到使用expressJS
制作的 API 中,但在提交后返回未定义,但是当我尝试使用邮递员时,它成功接收了数据。 I want to replicate the scenario in postman using fetch api, below is my code.我想使用 fetch api 在 postman 中复制场景,下面是我的代码。
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',
}
});
});
My ExpressJS API code我的 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`});
});
});
My postman settings are POST->BODY->x-www-form-urlencoded我的邮递员设置是 POST->BODY->x-www-form-urlencoded
Edit编辑
I included an console.log(req.body) on express to show the what it gets and the output is below.我在 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'
}
Maybe you can try this code below:也许你可以试试下面的这段代码:
👨🏻🏫 In Your Fetch API: 👨🏻🏫 在你的 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',
},
});
});
💡 You can read the documentation here . 💡 你可以在这里阅读文档。
Now, you can console.log()
it first.现在,您可以先使用console.log()
它。
app.post('/api/members', (req, res)=> {
console.log(req.body);
// do some stuff here
});
I hope it's can help 🙏.我希望它可以帮助🙏。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.