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

Question

我\xe2\x80\x99m 使用较新版本的 apollo 服务器 V4，我需要有关如何将图像或视频从前端上传到 cloudinary 并将 URL 保存到 MongoDB 数据库\xe2\x80\xa6 的帮助，请帮助

\n

我已阅读 Apollo 文档，但那里没有答案 \xe2\x80\xa6 我\xe2\x80\x99m 现在有点卡住了

\n

Answer 1

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

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

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

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

这是在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 0=@tmp.jpg \
  -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/