FormData is null but file is ok

Question

(front vuejs3 + axios | back nodejs + prisma sql)

I have a function to create a post. When I use it with postman it works.

But when I use it with frontend it returns me a formdata = null

On this.selectedFile, i have the file

can you help me please ?

data () {
    return {
        title: '',
        content: '',
        userId: '',
        selectdFile: null,
    }
},
methods: {
    onFileSelected (event) {
        this.selectedFile = event.target.files[0];
        console.log(this.selectedFile);
    },
    async createPost() {
        const formData = new FormData();
        formData.append( 'image', this.selectedFile, this.selectedFile.name );

        console.log('ok')
        console.log(formData);
        const id = localStorage.getItem('userId');
        const response = await axios.post('http://localhost:3000/api/post', {
            title: this.title,
            content: this.content,
            userId: parseInt(id),
            attachment: formData,

        }, {
            headers: {
                Authorization: 'Bearer ' + localStorage.getItem('token')
            },
        });
        console.log(response);
    },

Voici le resultat :

Answer 1

Try this:

const response = await axios.postForm(
  "http://localhost:3000/api/post",
  {
    title: this.title,
    content: this.content,
    userId: parseInt(id),
    attachment: this.selectedFile,
  },
  {
    headers: {
      Authorization: "Bearer " + localStorage.getItem("token"),
    },
  }
);