如何通过 NextJS API 路由将文件（图像）传递给外部 API？

Question

我在后端使用 NextJS（组合：授权仪表板的 SSR 和 SPA）和 Django Rest FW。 对于身份验证，我使用存储在 cookie 中的 JWT 令牌。 出于这个原因，我需要一个位于 /pages/api/* 的中间件，以便从 cookie 访问令牌附加每个请求。

问题：如何实现将文件发送到 /pages/api/upload 并使用访问令牌发送到 DRF 的受保护请求？

小型 API 中间件示例

export default async (req, res) => {
  const { id } = req.query
  const cookies = cookie.parse(req.headers.cookie ?? "");
  const access = cookies["access"] ?? false;
  if (access === false) {
    return res.status(401).json({
      error: "User unauthorized to make this request"
    });
  }

  if (req.method === "GET") {
    try {
      const apiRes = await fetch(`${LOCAL_API_URL}/items/${id}`, {
        headers: {
          "Accept": "application/json",
          "Content-Type": "application/json",
          "Authorization": `Bearer ${access}`
        }
      });
      const data = await apiRes.json();
      if (apiRes.status === 200) {
        return res.status(200).json(data);
      } else {
        return res.status(apiRes.status).json({
          error: data.error
        });
      }
    } catch(err) {
      console.log(err);
      return res.status(500).json({
        error: "Something went wrong"
      });
    }
  } else
    res.setHeader("Allow", ["GET"]);
  return res.status(405).json({
    error: `Method ${res.method} is not allowed`
  });
}

Answer 1

要发送图像，您应该使用 FormData。 首先创建一个 FormData 的实例。

const formData = new FormData()

然后，您可以将图像添加到其中。

formData.append('fieldName', someFileInput.current.files[0])

此外，如果您想在图像中添加更多数据，您也可以将其附加到 FormData，类似的方式。

formData.append('fieldName', someMoreData)

然后，您应该将 Content-Type 设置为“multipart/form-data”，这是为了让服务器了解您传递了 FormData。

最后，通过 Fetch 发送表单数据。

很高兴为您解答，希望对您有所帮助！

Answer 2

解决方案很简单。 刚刚传递了我收到的所有内容并将令牌附加到标题/

export default async (req, res) => {
  // all extra validation
  const apiRes = await fetch(`${LOCAL_API_URL}/upload/`, {
    method: "POST",
    headers: { ...req.headers, ...{ "Authorization": `Bearer ${access}` } },
    body: req.body
  });
  // all extra validation
}