如何在axios post请求中传递formData和body参数

Question

i want to pass formdata and data in body parameter in axios post request, i tried some way but its not working. //code

const form = new FormData();


    form.append("file", this.state.selectedFile);

    const data={
       token:localStorage.getItem('token'),

    }

    axios.post('http://localhost:3000/api/upload',form, {
            onUploadProgress: ProgressEvent => {
            this.setState({
                loaded: (ProgressEvent.loaded / ProgressEvent.total*100),
            })
        }, 
    })
    .then(response=>{
        console.log(response)
    }).then(res => { 
        toast.success('upload success')


    })
    .catch(err => { 
        toast.error('upload fail')
    })

Answer 1

You need to provide valid headers for respective content type

 axios({ method: 'post', url: 'http://localhost:3000/api/upload', data: form, headers: {'Content-Type': 'multipart/form-data' } })

Answer 2

You are trying to pass a file in FormData which is not possible and you need to use FormUrlEncoded. To do so you also need to install a npm package named query-string and then your data property would look something like this:

import qs from 'query-string';
...
axios.post(..., data:qs.stringify({
  file: this.state.selectedFile
})