在使用 axios 的 reactjs 中的 formDate 上使用 append 方法后，formData 正在设置从状态设置的空文件变量

Question

I am using formData with axios in my react frontend app in order to set the file using post method. But, the data that I sent to the backend rest app is getting empty.

const formData = new FormData();
//setting the file upload value from state variable
formData.append("file", file);

Axios.post(url, formData, { headers: { 'Content-Type': 'multipart/form-data'}}).then(res => console.log(res))

Answer 1

It's hard to tell without seeing the backend code but I had this problem once, and the solution for me was that the key that you append the data to needs to be called the exact same thing in front- and backend, and if I'm not mistaken it's case sensitive aswell, which is where I believe my problem came from. So in your case the key is "file", and it needs to be called exactly "file" when you try to access it in your backend aswell.