Currently, in my Vue.js project, I am utilizing Axios and FormData to transmit data to a server. Previously, this method worked flawlessly. However, at present, when I attempt to send a formData object, it appears that the data is not being appended as expected:
Example of the mock server response:
https://i.sstatic.net/NnS9c.png
Observations from Chrome developer tools:
https://i.sstatic.net/WzH35.png
(Please note that the content-length shows 2 and the FormData seems to be missing)
let url = "https://benben.free.beeceptor.com/1"
const fd = new FormData()
fd.append('key', 'value')
return axios.post(url, fd, {
headers: {
'Content-Type': 'multipart/form-data'
}
})
Steps taken so far:
- Reviewed the payload via chrome/firefox/edge dev tools and on the mock server.
- Experimented with sending simple JSON instead of FormData which proved successful.
- Tested post requests with and without specific headers - no change in results.
- Confirmed successful appending of data to FormData (the key-value pair exists).
- Explored various Stackoverflow suggested solutions but none have resolved the issue.
- Tried updating Axios to the latest version.
- Utilized the direct Axios API by passing an object directly to Axios.
Please Note: My requirement for FormData is due to the need to upload a file.
If you require additional code snippets or information, please feel free to ask.
Thank you for your assistance!