如何使用 axios 将图像和文本放入 api

Question

        const fd = new FormData()
        fd.append('pp', this.state.image)
        fd.append('username', this.state.user.username)
        fd.append('email', this.state.user.email)
        fd.append('bio', this.state.user.bio)
        console.log(this.state.user)
        axios.put(`http://127.0.0.1:8000/users/profile/update/${this.state.id}/`, fd, {
            headers: {
                'Content-Type': 'multipart/form-data'
            }
        })

The above code is resulting in a 400 bad request, but when I try in postman it works. So I believe it is a misuse of formdata can someone help. By the way whenever I only update the image it works, but once I update one of the text fields it doesn't.

Answer 1

The name of your request body parameters in axios aren't strings. They are simply the name of the field. So your request body should actually look like this:-

fd = {
  pp : this.state.image,
  username : this.state.user.username,
  email : this.state.user.email,
  bio : this.state.user.bio
}