Form data is empty after sending it with Axios
I'm sending an FormData from a VueJS application using Axios. The problem is that when I output the FormData it's empty. I've used the same method before when sending a file (I'm not sending a file now) and then the FormData shows the right data that I've append to it. The data I'm appending is of the type string.
Client Side
onUpload(): void {
const fd = new FormData();
fd.append("id", this.chosenRoute.id);
fd.append("name", this.routeName);
fd.append("description", this.routeDescription);
fd.append("activity", this.activity);
fd.append("preamble", this.preamble);
axios.post('http://localhost:8080/editRoute', fd, {
onUploadProgress: uploadEvent => {
console.log('Upload Progress' + Math.round(uploadEvent.loaded / uploadEvent.total) * 100 + " %");
}
}).then(
res => {
console.log(res);
});
}
Server Side
app.post('/editRoute', function(req,res){
console.log(req.body);
const routeId = req.body.id;
console.log(routeId);
Route.findById(routeId, (err, route) => {
res.set("Access-Control-Allow-Origin", "*");
route.update(req.body);
});
});
node.js express vue.js axios multipartform-data
asked Nov 20 at 20:49
M. H
927
add a comment |
I'm sending an FormData from a VueJS application using Axios. The problem is that when I output the FormData it's empty. I've used the same method before when sending a file (I'm not sending a file now) and then the FormData shows the right data that I've append to it. The data I'm appending is of the type string.
Client Side
onUpload(): void {
const fd = new FormData();
fd.append("id", this.chosenRoute.id);
fd.append("name", this.routeName);
fd.append("description", this.routeDescription);
fd.append("activity", this.activity);
fd.append("preamble", this.preamble);
axios.post('http://localhost:8080/editRoute', fd, {
onUploadProgress: uploadEvent => {
console.log('Upload Progress' + Math.round(uploadEvent.loaded / uploadEvent.total) * 100 + " %");
}
}).then(
res => {
console.log(res);
});
}
Server Side
app.post('/editRoute', function(req,res){
console.log(req.body);
const routeId = req.body.id;
console.log(routeId);
Route.findById(routeId, (err, route) => {
res.set("Access-Control-Allow-Origin", "*");
route.update(req.body);
});
});
node.js express vue.js axios multipartform-data
asked Nov 20 at 20:49
M. H
927
1
Not too familiar with vue.js / axios, but it could be a content-type issue. Content type is different when sending a file.
– JM-AGMS
Nov 20 at 20:55
@JM-AGMS Do you know if I could send it as something else? I've tried sending it as a JSON-string but it gives me problems too
– M. H
Nov 20 at 20:57
@MrAleister I'm not sending a file this time. It's only strings.
– M. H
Nov 20 at 21:05
@M.H it think you should setlet fd = new FormData()
– Boussadjra Brahim
Nov 20 at 21:40
add a comment |
I'm sending an FormData from a VueJS application using Axios. The problem is that when I output the FormData it's empty. I've used the same method before when sending a file (I'm not sending a file now) and then the FormData shows the right data that I've append to it. The data I'm appending is of the type string.
Client Side
onUpload(): void {
const fd = new FormData();
fd.append("id", this.chosenRoute.id);
fd.append("name", this.routeName);
fd.append("description", this.routeDescription);
fd.append("activity", this.activity);
fd.append("preamble", this.preamble);
axios.post('http://localhost:8080/editRoute', fd, {
onUploadProgress: uploadEvent => {
console.log('Upload Progress' + Math.round(uploadEvent.loaded / uploadEvent.total) * 100 + " %");
}
}).then(
res => {
console.log(res);
});
}
Server Side
app.post('/editRoute', function(req,res){
console.log(req.body);
const routeId = req.body.id;
console.log(routeId);
Route.findById(routeId, (err, route) => {
res.set("Access-Control-Allow-Origin", "*");
route.update(req.body);
});
});
node.js express vue.js axios multipartform-data
asked Nov 20 at 20:49
M. H
927
I'm sending an FormData from a VueJS application using Axios. The problem is that when I output the FormData it's empty. I've used the same method before when sending a file (I'm not sending a file now) and then the FormData shows the right data that I've append to it. The data I'm appending is of the type string.
Client Side
onUpload(): void {
const fd = new FormData();
fd.append("id", this.chosenRoute.id);
fd.append("name", this.routeName);
fd.append("description", this.routeDescription);
fd.append("activity", this.activity);
fd.append("preamble", this.preamble);
axios.post('http://localhost:8080/editRoute', fd, {
onUploadProgress: uploadEvent => {
console.log('Upload Progress' + Math.round(uploadEvent.loaded / uploadEvent.total) * 100 + " %");
}
}).then(
res => {
console.log(res);
});
}
Server Side
app.post('/editRoute', function(req,res){
console.log(req.body);
const routeId = req.body.id;
console.log(routeId);
Route.findById(routeId, (err, route) => {
res.set("Access-Control-Allow-Origin", "*");
route.update(req.body);
});
});
node.js express vue.js axios multipartform-data
node.js express vue.js axios multipartform-data
asked Nov 20 at 20:49
M. H
927
asked Nov 20 at 20:49
M. H
927
edited Nov 20 at 21:04
asked Nov 20 at 20:49
M. H
927
asked Nov 20 at 20:49
M. H
927
asked Nov 20 at 20:49
M. H
927
927
1
Not too familiar with vue.js / axios, but it could be a content-type issue. Content type is different when sending a file.
– JM-AGMS
Nov 20 at 20:55
@JM-AGMS Do you know if I could send it as something else? I've tried sending it as a JSON-string but it gives me problems too
– M. H
Nov 20 at 20:57
@MrAleister I'm not sending a file this time. It's only strings.
– M. H
Nov 20 at 21:05
@M.H it think you should setlet fd = new FormData()
– Boussadjra Brahim
Nov 20 at 21:40
add a comment |
1
Not too familiar with vue.js / axios, but it could be a content-type issue. Content type is different when sending a file.
– JM-AGMS
Nov 20 at 20:55
@JM-AGMS Do you know if I could send it as something else? I've tried sending it as a JSON-string but it gives me problems too
– M. H
Nov 20 at 20:57
@MrAleister I'm not sending a file this time. It's only strings.
– M. H
Nov 20 at 21:05
@M.H it think you should setlet fd = new FormData()
– Boussadjra Brahim
Nov 20 at 21:40
1
1
Not too familiar with vue.js / axios, but it could be a content-type issue. Content type is different when sending a file.
– JM-AGMS
Nov 20 at 20:55
Not too familiar with vue.js / axios, but it could be a content-type issue. Content type is different when sending a file.
– JM-AGMS
Nov 20 at 20:55
@JM-AGMS Do you know if I could send it as something else? I've tried sending it as a JSON-string but it gives me problems too
– M. H
Nov 20 at 20:57
@JM-AGMS Do you know if I could send it as something else? I've tried sending it as a JSON-string but it gives me problems too
– M. H
Nov 20 at 20:57
@MrAleister I'm not sending a file this time. It's only strings.
– M. H
Nov 20 at 21:05
@MrAleister I'm not sending a file this time. It's only strings.
– M. H
Nov 20 at 21:05
@M.H it think you should set
let fd = new FormData()– Boussadjra Brahim
Nov 20 at 21:40
@M.H it think you should set
let fd = new FormData()– Boussadjra Brahim
Nov 20 at 21:40
add a comment |
2 Answers
2
active
oldest
votes
From axios documentation:
By default, axios serializes JavaScript objects to JSON.
So, you can't just pass a JS FormData object straight to the options of an axios call. If you must use FormData, see recommended methods here: https://www.npmjs.com/package/axios#using-applicationx-www-form-urlencoded-format
However, if, as you mention above, but what looks like key/value pairs, don't use FormData at all, but a regular JavaScript Object.
const body = {
"id": this.chosenRoute.id.
"name": this.routeName,
"description": this.routeDescription,
"activity": this.activity,
"preamble": this.preamble
}
axios.post('http://localhost:8080/editRoute', body, ...
answered Nov 20 at 21:50
wlh
1,6221722
add a comment |
Aren't you supposed to use .set() not .append() for regular fields, I thought you used .append() for files only?
I also suggest getting to grips with native JSON for form data handling as the other answer mentions, It is a lot simpler, cleaner solution.
answered Nov 20 at 21:53
Marc Newton
1,8581320
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53401293%2fform-data-is-empty-after-sending-it-with-axios%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
From axios documentation:
By default, axios serializes JavaScript objects to JSON.
So, you can't just pass a JS FormData object straight to the options of an axios call. If you must use FormData, see recommended methods here: https://www.npmjs.com/package/axios#using-applicationx-www-form-urlencoded-format
However, if, as you mention above, but what looks like key/value pairs, don't use FormData at all, but a regular JavaScript Object.
const body = {
"id": this.chosenRoute.id.
"name": this.routeName,
"description": this.routeDescription,
"activity": this.activity,
"preamble": this.preamble
}
axios.post('http://localhost:8080/editRoute', body, ...
answered Nov 20 at 21:50
wlh
1,6221722
add a comment |
From axios documentation:
By default, axios serializes JavaScript objects to JSON.
So, you can't just pass a JS FormData object straight to the options of an axios call. If you must use FormData, see recommended methods here: https://www.npmjs.com/package/axios#using-applicationx-www-form-urlencoded-format
However, if, as you mention above, but what looks like key/value pairs, don't use FormData at all, but a regular JavaScript Object.
const body = {
"id": this.chosenRoute.id.
"name": this.routeName,
"description": this.routeDescription,
"activity": this.activity,
"preamble": this.preamble
}
axios.post('http://localhost:8080/editRoute', body, ...
answered Nov 20 at 21:50
wlh
1,6221722
add a comment |
From axios documentation:
By default, axios serializes JavaScript objects to JSON.
So, you can't just pass a JS FormData object straight to the options of an axios call. If you must use FormData, see recommended methods here: https://www.npmjs.com/package/axios#using-applicationx-www-form-urlencoded-format
However, if, as you mention above, but what looks like key/value pairs, don't use FormData at all, but a regular JavaScript Object.
const body = {
"id": this.chosenRoute.id.
"name": this.routeName,
"description": this.routeDescription,
"activity": this.activity,
"preamble": this.preamble
}
axios.post('http://localhost:8080/editRoute', body, ...
answered Nov 20 at 21:50
wlh
1,6221722
From axios documentation:
By default, axios serializes JavaScript objects to JSON.
So, you can't just pass a JS FormData object straight to the options of an axios call. If you must use FormData, see recommended methods here: https://www.npmjs.com/package/axios#using-applicationx-www-form-urlencoded-format
However, if, as you mention above, but what looks like key/value pairs, don't use FormData at all, but a regular JavaScript Object.
const body = {
"id": this.chosenRoute.id.
"name": this.routeName,
"description": this.routeDescription,
"activity": this.activity,
"preamble": this.preamble
}
axios.post('http://localhost:8080/editRoute', body, ...
answered Nov 20 at 21:50
wlh
1,6221722
answered Nov 20 at 21:50
wlh
1,6221722
answered Nov 20 at 21:50
wlh
1,6221722
answered Nov 20 at 21:50
wlh
1,6221722
1,6221722
add a comment |
add a comment |
Aren't you supposed to use .set() not .append() for regular fields, I thought you used .append() for files only?
I also suggest getting to grips with native JSON for form data handling as the other answer mentions, It is a lot simpler, cleaner solution.
answered Nov 20 at 21:53
Marc Newton
1,8581320
add a comment |
Aren't you supposed to use .set() not .append() for regular fields, I thought you used .append() for files only?
I also suggest getting to grips with native JSON for form data handling as the other answer mentions, It is a lot simpler, cleaner solution.
answered Nov 20 at 21:53
Marc Newton
1,8581320
add a comment |
Aren't you supposed to use .set() not .append() for regular fields, I thought you used .append() for files only?
I also suggest getting to grips with native JSON for form data handling as the other answer mentions, It is a lot simpler, cleaner solution.
answered Nov 20 at 21:53
Marc Newton
1,8581320
Aren't you supposed to use .set() not .append() for regular fields, I thought you used .append() for files only?
I also suggest getting to grips with native JSON for form data handling as the other answer mentions, It is a lot simpler, cleaner solution.
answered Nov 20 at 21:53
Marc Newton
1,8581320
answered Nov 20 at 21:53
Marc Newton
1,8581320
answered Nov 20 at 21:53
Marc Newton
1,8581320
answered Nov 20 at 21:53
Marc Newton
1,8581320
1,8581320
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53401293%2fform-data-is-empty-after-sending-it-with-axios%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
Not too familiar with vue.js / axios, but it could be a content-type issue. Content type is different when sending a file.
– JM-AGMS
Nov 20 at 20:55
@JM-AGMS Do you know if I could send it as something else? I've tried sending it as a JSON-string but it gives me problems too
– M. H
Nov 20 at 20:57
@MrAleister I'm not sending a file this time. It's only strings.
– M. H
Nov 20 at 21:05
@M.H it think you should set
let fd = new FormData()– Boussadjra Brahim
Nov 20 at 21:40