如何在 Apollo 服务器 V4 中上传文件

Question

我正在使用较新版本的 apollo server V4，我需要有关如何从前端上传图像或视频到 cloudinary 并将 url 保存到 MongoDB 数据库的帮助......请帮忙🙏

我已经通读了 Apollo 文档，但那里没有答案……我现在有点卡住了

Answer 1

Apollo 有一篇关于 Apollo 文件上传的精彩博客文章，基本上他们推荐使用第三方图像服务或预签名上传 url（例如，通过 graphql 获取预签名 url，将图像直接上传到该 url，然后通过 graphql 突变保存图像的位置/id）。

有一个通过 graphql 请求上传图像的标准，虽然 Apollo 不推荐它，但是最流行的 Node.js 包来帮助实现这一点是 graphql-upload.

要使它与 Apollo 4 和 Express 一起使用（如果这是您正在使用的），您需要按照他们的说明进行操作在这里使用 express 中间件。

请注意，Apollo 会阻止“简单”的 CORS 请求以防止 CSRF 攻击，这很可能会影响您的图片上传，因此您需要按照 此处的说明 在您的请求中包含其他标头或禁用 CSRF 保护（不推荐） .您可以通过从下面的 CURL 请求中排除

Apollo-Require-Preflight

标头来查看此示例。

这里是 codesandbox 中 graphql 上传的最小示例.

还有一个 CURL 请求来测试它

$ curl https://2nnbw4-4000.csb.app/ \
  -F operations='{ "query": "mutation ($id: String!, $image: Upload!) { uploadImage(id: $id, image: $image) { id filename } }", "variables": { "image": null, "id": "1" } }' \
  -F map='{ "0": ["variables.image"] }' \
  -F [email protected] \
  -H 'Apollo-Require-Preflight: true'

{"data":{"uploadImage":{"id":"1","filename":"tmp.jpg"}}}

Answer 2

在向 Cloudinary 上传请求的响应部分，您将收到密钥中的 URL：

url

.

响应示例：https://cloudinary.com/documentation/image_upload_api_reference#upload_response

您可以通过 GraphQL 将其保存到您的数据库中。我不确定你被困在哪里（Apollo 服务器是否连接到数据库？）但我建议查找一些关于如何使用 Apollo/GraphQL 存储数据的指南。

https://www.apollographql.com/tutorials/fullstack-quickstart/connecting-to-data-sources https://hasura.io/learn/graphql/intro-graphql/graphql-mutations/