Send post request form data with image to back end

Question

Currently here is my code about sending post request to back end (in reactjs using axios):

sendDataToBackEnd = async () => {
      await axios.post(
        'http://localhost:9000/message',
         {
           testPlace: 
             {
               country: this.state.countryTest,
               city: this.state.cityTest,
               testSite: this.state.testSite
             },
           personalInformation:
             {
               name: this.state.name,
               birthday:this.state.birthday),
               gender:this.state.gender,
               address:this.state.address,
             }
         }
        ,
        { headers: { 
          'Content-Type': 'application/json'
        } }
      ).then((response) => {
          // got the response. do logic
      })
  }

Now, I need to also send the image of the person to back end to save. I think I have to send form data instead. However, I am having problems sending my information above to back end. Here is how I do it:

sendDataToBackEnd = async () => {
    let formData = new FormData();
    formData.append('testPlace',
             {
               country: this.state.countryTest,
               city: this.state.cityTest,
               testSite: this.state.testSite
             })
    formData.append('personalInformation',
             {
               name: this.state.name,
               birthday:this.state.birthday),
               gender:this.state.gender,
               address:this.state.address,
             })
    formData.append('file',this.state.picture)
      await axios.post(
        'http://localhost:9000/message',
         formData
        ,
        { headers: { 
          'Content-Type': 'multipart/form-data'
        } }
      ).then((response) => {
          // got the response. do logic
      })
  }

However, when I check the request sent to back end, it shows [Object Object]. I think I wrote the formData of my testPlace and personalInformation wrong but I do not know how to do it. Can anyone correct it ?

can you share backend code?. Please check what is the use of formData — krbalaji, Apr 22 '20 at 03:23
My backend code is just reading the data from front end. However, the frontend only sends [Object Object]. I read that Formdata send sets of key/pairs value but as my Post request is more complicated, is it not suitable ? — emiya, Apr 22 '20 at 03:36

score 0 · Accepted Answer · answered Apr 22 '20 at 04:13

You can't apend object to formData you can readmore at this answer. Sotry this

let formData = new FormData();
formData.append('file',this.state.picture)
formData.append('testPlace[country]', this.state.countryTest)
formData.append('testPlace[city]', this.state.cityTest)
formData.append('testPlace[testSite]', this.state.testSite)

formData.append('personalInformation[name]', this.state.name)
formData.append('personalInformation[birthday]', this.state.birthday)
formData.append('personalInformation[gender]', this.state.gender)
formData.append('personalInformation[address]', this.state.address)
...

Send post request form data with image to back end

1 Answers1