Nuxt 3 获取多部分表单数据上传不起作用

Question

无论出于何种原因，我无法将图像上传到我的服务器。但当使用 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.log(file)
            console.log(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 帖子请求：

Answer 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,
   }
})