how to send files and data with axios in react?

Question

backend is expecting something like

    {
       "key" : "xyz"
}// and two files

I've tried the following code, but it always shows empty params passed in url

 const obj = {
        key : [this.state.key]
      };
      const json = JSON.stringify(obj);
      const blob = new Blob([json], {
        type: 'application/json'
      });
      const data = new FormData();
      data.append("params", blob);
      data.append("data1",this.state.file1)
      data.append("data2",this.state.file2)
      
        let res= await axios.get(url,data);
        console.log(res)

Another source: https://stackoverflow.com/questions/47630163/axios-post-request-to-send-form-data — Dennis Vash, Nov 24 '20 at 06:07
you can find another source with a complete react example. https://stackoverflow.com/questions/41878838/how-do-i-set-multipart-in-axios-with-react — Asad Mehmood, Nov 24 '20 at 06:13

score 0 · Answer 1 · answered Nov 24 '20 at 06:03

You can't send data(body) by using get method. I think you need to use post method.

 const obj = {
        key : [this.state.key]
      };
      const json = JSON.stringify(obj);
      const blob = new Blob([json], {
      type: 'application/json'
      });
      const data = new FormData();
      data.append("params", blob);
      data.append("data1",this.state.file1)
      data.append("data2",this.state.file2)
      
      let res= await axios.post(url,data);

score 0 · Answer 2 · answered Nov 24 '20 at 06:05

0

You cannot use formData with get, in order to send with body, file upload has to be a post request.

let res= await axios.post(url,data);

answered Nov 24 '20 at 06:05

Someone Special

12,479
7
45
76

how to send files and data with axios in react?

2 Answers2