如何在Apollo Server V4中上传文件

Question

我正在使用较新版本的Apollo Server V4，需要帮助学习如何从前端上传图片或视频到Cloudinary，并将URL保存到MongoDB数据库中... 请帮帮我。

我已经阅读了Apollo文档，但是没有找到答案... 我现在有点困惑了。

- user17371035

---

你解决了这个问题吗？ - user1148920

Answer 1

这里有一篇非常棒的Apollo关于Apollo文件上传的博客文章, 他们建议使用第三方图像服务或预签名上传URL（例如，通过graphql获取预签名URL，直接将图像上传到该URL，然后通过graphql mutation保存图像的位置/ID）。

虽然Apollo不推荐，但是有一种通过graphql请求上传图像的标准方法，而最受欢迎的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 0=@tmp.jpg \
  -H 'Apollo-Require-Preflight: true'

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

- phdesign

---

分享一下@phdesign的博客文章，讲述他是如何提出这个解决方案的。谢谢！https://phdesign.com.au/programming/apollo-server-4-serverless-graphql-upload/ - undefined

Answer 2

在Cloudinary的上传请求的响应部分，您将在键：url中收到URL。

示例响应：https://cloudinary.com/documentation/image_upload_api_reference#upload_response 您可以通过GraphQL将其保存到数据库中。我不确定您卡在哪里了（Apollo服务器是否连接到DB？），但我建议查阅一些关于如何利用Apollo/GraphQL存储数据的指南。

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

- rnambacld

---

谢谢您的回复，我遇到的另一个问题是我无法将Upload scalar添加到较新的Apollo/server v4 GraphQL模式中...因此，没有办法上传文件进行突变。 - user17371035

也许我没有问对问题。我无法为上传创建模式在较新的Apollo服务器版本上。 - user17371035

在原始问题中，听起来您正在使用Cloudinary作为图像上传服务，因此通常您会1.将图像上传到Cloudinary并在响应中接收一个ID /位置，然后2.进行GraphQL请求以保存ID /位置。在您上面的评论中，您正在询问如何在GraphQL中上传文件，因此我已经添加了另一个答案来解决这个问题。 - phdesign

Answer 3

只是以防万一有人需要： 一个简单的解决方案是在前端将图像转换为base64字符串，并像其他字符串一样发送。在后端，您可以将其保存回图像。

- Lojik