по какой-то причине я не могу загрузить изображение на свой сервер. Но если делать это с помощью 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 Почтовый запрос:
А что такое useSmartFetch?
Итак, useSmartFetch — это, по сути, просто специальная оболочка исходной функции $fetch, которая устраняет такие ошибки, как 401, 404 и так далее. Однако, как вы можете видеть, я пытаюсь заставить код работать с исходной функцией $fetch и не использовал свою собственную компоновку. Но это все еще не работает. Я обновил свой вопрос и добавил запрошенные изображения. @Хенридв
Можете ли вы попробовать удалить заголовок «Content-Type»: «multipart/form-data» из вашего запроса на выборку?






При использовании 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,
}
})
Хорошо, это сработало. Я очень растеряна... Однако спасибо!
Можете ли вы показать запрос в консоли разработчика в своем браузере?