vue.js 如何使用Nuxt3服务器作为带有FormData的直通API来隐藏外部端点

tktrz96b  于 2023-02-09  发布在  Vue.js
关注(0)|答案(1)|浏览(293)

我正在尝试了解Nuxt /server API,但似乎不知道如何将包含表单数据(即文件)的POST请求发送到Nuxt服务器,以便转发到外部服务:
在我的pages.vue文件中,我使用了以下方法:

async function onSubmit() {
  const formData = new FormData();
  for (let file of form.files) {
    await formData.append("image", file);
  }

  await $fetch("/api/send", {
    method: "POST",
    body: formData
  });
}

然后在/server/api/send.js中我有

export default defineEventHandler(async (event) => {
  const { method } = event.node.req;

// I THINK THE ISSUE IS HERE 
  const body =
    method !== "GET" && method !== "HEAD"
      ? await readMultipartFormData(event)
      : undefined;

  const response = await $fetch.raw(https://*******, {
      method,
      baseURL: *********,
      headers: {
      },
      body: body
    });

   return response._data;
}

我使用Nuxt有效地创建了一个直通API,这样外部端点就不会暴露给最终用户。只是不知道如何以正确的格式访问formData以在服务器端通过。我不认为我应该使用readMultipartFormData(),因为它似乎以某种方式解析数据,而我只想直接将formData传递给外部API。有什么提示吗?
我试过使用readMultipartFormData()readBody(),但似乎都不起作用。我实际上不需要读取主体,而是获取它并不带任何格式地传递它...

ldioqlga

ldioqlga1#

如果你想把数据和formdata一起传递给端点,试试这个库:https://www.npmjs.com/package/object-to-formdata
代码:

import { serialize } from 'object-to-formdata';
const formData = serialize(body);
const response = await $fetch.raw(https://*******, {
      method,
      baseURL: *********,
      headers: {
      },
      body: formData
    });

相关问题