Загрузка данных многочастной формы Nuxt 3 не работает

по какой-то причине я не могу загрузить изображение на свой сервер. Но если делать это с помощью RapidAPI и с тем же самым изображением, это работает. Что я здесь делаю не так?

Код QuillEditor:

<template>
  <QuillEditor :modules = "modules" :toolbar = "toolbar" theme = "snow" toolbar = "full" />
</template>

<script>
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';
import ImageUploader from "quill-image-uploader";
const runtimeConfig = useRuntimeConfig();
const { fetch } = useSmartFetch();

export default {
  setup: () => {
    const toolbar = [
      ['image', 'link'],
      ['emoji']
    ];
    const modules = {
      name: "imageUploader",
      module: ImageUploader,
      options: {
        upload: (file) => {
          return new Promise(async (resolve, reject) => {
            const formData = new FormData()
            formData.append('image', file);

            console.info(file)
            console.info(formData)

            const authStore = useAuthStore()
            const response = await $fetch(runtimeConfig.public.api.image.upload, {
              method: 'POST',
              body: formData,
              headers: {
                'Authorization': 'Bearer ' + authStore.accessToken,
                'Content-Type': 'multipart/form-data'
              }
            })


          });
        },
      },
    };

    return { toolbar, modules };
  },
  components: {
    QuillEditor,
  },
};
</script>

Когда я проверяю свой запрос, я установил свой токен на предъявителя для аутентификации (в противном случае я получил бы 401 вместо 422), а также Content-Type: multipart/form-data. Даже моя полезная нагрузка содержит данные формы. Это начало моей полезной нагрузки:

-----------------------------118964521239883964394155378140
Content-Disposition: form-data; name = "image"; filename = "1705385217523.jpg"
Content-Type: image/jpeg
...
...
...

Однако в Laravel Telescope моя полезная нагрузка пуста:

Если сделать то же самое с RapidAPI:

Все работает без проблем. Также устанавливается полезная нагрузка:

Как это может быть? Я почти уверен, что мой бэкэнд работает, он проверен. Но я также уверен, что делаю запрос правильно. Кто-нибудь может мне помочь?

С уважением

Обновлено (добавлены изображения консоли разработчика): 204 Варианты запроса:

422 Почтовый запрос:

Можете ли вы показать запрос в консоли разработчика в своем браузере?

Henridv 26.04.2024 20:36

А что такое useSmartFetch?

Henridv 26.04.2024 20:40

Итак, useSmartFetch — это, по сути, просто специальная оболочка исходной функции $fetch, которая устраняет такие ошибки, как 401, 404 и так далее. Однако, как вы можете видеть, я пытаюсь заставить код работать с исходной функцией $fetch и не использовал свою собственную компоновку. Но это все еще не работает. Я обновил свой вопрос и добавил запрошенные изображения. @Хенридв

Jan 27.04.2024 10:29

Можете ли вы попробовать удалить заголовок «Content-Type»: «multipart/form-data» из вашего запроса на выборку?

Henridv 27.04.2024 11:11
Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Оживление вашего приложения Laravel: Понимание режима обслуживания
Оживление вашего приложения Laravel: Понимание режима обслуживания
Здравствуйте, разработчики! В сегодняшней статье мы рассмотрим важный аспект управления приложениями, который часто упускается из виду в суете...
Коллекции в Laravel более простым способом
Коллекции в Laravel более простым способом
Привет, читатели, сегодня мы узнаем о коллекциях. В Laravel коллекции - это способ манипулировать массивами и играть с массивами данных. Благодаря...
Поиск нового уровня в Laravel с помощью MeiliSearch и Scout
Поиск нового уровня в Laravel с помощью MeiliSearch и Scout
Laravel Scout - это популярный пакет, который предоставляет простой и удобный способ добавить полнотекстовый поиск в ваше приложение Laravel. Он...
Освоение архитектуры микросервисов с Laravel: Лучшие практики, преимущества и советы для разработчиков
Освоение архитектуры микросервисов с Laravel: Лучшие практики, преимущества и советы для разработчиков
В последние годы архитектура микросервисов приобрела популярность как способ построения масштабируемых и гибких приложений. Laravel , популярный PHP...
Как построить CRUD-приложение в Laravel
Как построить CRUD-приложение в Laravel
Laravel - это популярный PHP-фреймворк, который позволяет быстро и легко создавать веб-приложения. Одной из наиболее распространенных задач в...
2
4
218
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

При использовании FormData не следует явно задавать заголовок Content-Type. Это не позволит вашему браузеру установить заголовок Content-Type с выражением границы, используемым для разделения полей формы.

Более подробную информацию можно найти на MDN.

Итак, измените свой запрос fetch следующим образом:

const response = await $fetch(runtimeConfig.public.api.image.upload, {
   method: 'POST',
   body: formData,
   headers: {
     'Authorization': 'Bearer ' + authStore.accessToken,
   }
})

Хорошо, это сработало. Я очень растеряна... Однако спасибо!

Jan 27.04.2024 11:45

Другие вопросы по теме