Не получается отправить текст и изображение методом Fetch Объекты FormData

Question

Не получается отправить текст и изображение методом Fetch Объектом FormData При нажатие ввод вылетает ошибка в консоли Что я делаю не так? Код ниже. Через Postman данные отправляются.
`

     <form @submit.prevent="addNews" >
        
            <input type="text" v-model="post.author">
              <input type="text" v-model="post.title">
             <input type="text" v-model="post.content">
                <input type="file" @change="addfile($event)">
        
        <button >Ввод</button>

    </form>
    
     </div>
</template>
<script>
export default {
    data:()=>({
        post:{
    
author:'',
title:'',
content:'',
picture:''
        } ,
       picture:'',
    }),
    methods: {
        addfile(event){
            console.log(event);
            this.picture = event.target.files[0]
        },
        async addNews(){
            
            
        const fd= new FormData();
        fd.append('author', this.post.author)
        fd.append('title', this.post.title)
        fd.append('content', this.post.content)
        fd.append('picture', this.picture)
          const res = await fetch('http://localhost:5000/api/posts',{
                method: 'POST',
                headers: {
                'Content-Type':'multipart/form-data' 
                },
                body:fd
                
            })
            .then(res => res.json(fd))
        }
    },
}
</script>`

Answer 1

Вопрос решил. Переписал код (fetch) по другому и дописал нужный response, и все ок:

try{
             const response = await fetch('http://localhost:5000/api/posts',{
             method:'POST',
             body:fd
             });
             const result =await response.json();
console.log('Успех:',JSON.stringify(result))
         }catch (error)
         {
              console.error('Ошибка:', error);
         }

БЛОГ НА HUSL

Не получается отправить текст и изображение методом Fetch Объекты FormData

Ответы (1 шт):