从创建视频和优化图像，到上传照片和编辑3D模型，Shopify应用程序可以出于各种原因管理媒体。如果你正在开发一款允许商家或客户与媒体互动的应用程序，那么你很可能需要实现上传媒体文件的功能。
我最近开始开发一个应用OB欧宝娱乐APP程序来批量管理收集的图像，并发现有很多因素需要考虑，但大多数开发工作都是处理上传。需要执行许多步骤，包括接受文件、存储和验证。更不用说上传性能了。
对于任何应用程序，允许用户上传文件通常都很复杂。这里有一大堆问题，如果文件只是传递给API，感觉就像是低效的双重处理。
在探索Shopify开发人员文档时，管理GraphQL API揭示了一个方便的特性:开发人员可以生成临时url，能够直接从用户那里接收文件——消除了双重处理。
“开发人员可以生成能够直接从用户那里接收文件的临时url，从而消除了双重处理。”
这意味着该应用程序不需要处理文件，上传的文件也不会传播太远。这是这款应用的巨大胜利而且用户体验。在这篇文章中，我们将看看创建一个允许用户直接上传媒体文件到Shopify的应用程序的四个步骤。
为Shopify商家开发应用程序
无论您是想为Shopify应用商店构建应用程序，提供自定义应用程序开发服务，还是正在寻找扩大用户基础的方法，Shopify合作伙伴计划都将为您的成功奠定基础。免费加入并获得教育资源、开发人员预览环境和经常性收入分享机会。
报名在你的应用中构建一个上传功能
在本例中，我将创建一个上传图像并将其与集合关联的过程，但同样的通用方法也可以应用于其他媒体类型，如视频或3D模型文件。
如果你想直接跳到完成的代码，你可以在这个GitHub回购，或者你可以查看提交查看每个步骤的详细信息。否则，让我们深入到流程中每个步骤的高级概述中。
1.建立基础
我们可以使用OB欧宝娱乐APPShopify App命令行Shopify app CLI在你的合作伙伴帐户中创建一个应用程序，生成一个骨架React项目(带有Rails或Node.js后端)，并启动服务器OB欧宝娱乐APPngrok．
然后应用程序可以安装到开发商店，你可以从商店管理员访问应用程序。Shopify App CLI工具也可以用于用样例产品填充开发存储区，我们将需要它来创建我们上传的图像可以应用到的集合。
“上传区域组件允许商家通过将文件拖放到页面上的某个区域或激活一个按钮来上传文件。”
下一步是列出商店的收藏并添加北极星掉落区组件对于每个集合。拖放区域组件允许商家通过将文件拖放到页面上的区域或激活按钮来上传文件。
根据你的应用程序如何使用文件上传，你可以自定义drop zone元素以只接受特定的文件类型，或者从页面其他地方的动作触发文件对话框。
在使用drop zone元素时，请确保您遵循了最佳实践，并在文件无法上传时通知商家，并在文件被删除并开始上传时提供反馈。
你可能还会喜欢:GraphQL入OB欧宝娱乐APP门．
2.准备突变
默认情况下，Shopify app CLI生成的应用包括阿波罗的客户，一个带有状态管理的GraphQL客户端。这将允许我们使用GraphQL来查询存储数据和修改对象。如果您不熟悉GraphQL以及如何在Shopify上使用它来检索和处理数据，我建议您查看我们的GraphQL上的开发者文档．
我们需要使用两个GraphQL突变:stagedUploadsCreate为我们的图像生成一个临时URL，以及collectionUpdate在Shopify上更新集合的图像属性。
突变需要包装在gql函数将它们解析为查询文档。
的useMutationHook返回一个函数，我们可以在准备执行特定的突变时调用该函数。
你可能还会喜欢:API速率限制和GraphQL工作．
3.生成临时URL
一旦用户将文件放到降落区组件，我们可以通过执行请求一个临时URLstagedUploadsCreate．这个突变需要一个输入描述文件。因为我们使用的是拖放区域组件，所以我们可以访问文件对象来获取名称、类型和大小。
这里还值得注意的是，这种突变接受一个数组，可以一次生成多个url。在我的例子中，已配置掉落区域只允许一个文件。响应包括一个临时URL以及用于身份验证的参数。
你可能还会喜欢:使用GraphQL更快地检索Shopify元字段．
4.准备表格并开始上传
现在我们有了URL和身份验证参数，我们可以创建一个新表单，附加每个参数，并附加文件本身。图像文件的实际上传是由获取．
假设我们收到一个OK响应，则上传成功。最后一步是告诉Shopify通过执行来使用这个新图像collectionUpdate，它需要一个集合ID和任何已更改的属性(在本例中为集合映像)。
为了测试我们是否正确设置了所有这些，你可以通过应用程序上传一张图像，当你导航到集合在管理区域，您将看到图像已应用到一个集合。如果你在应用程序中显示集合图像预览，由于Apollo Client的状态管理，更改将立即反映出来。
你可能还会喜欢:如何构建Shopify应用程序:完整指南．
使用GraphQL上传文件以获得更好的应用程序性能
虽然并不总是可以直接将文件发送到Shopify，但使用这种方法可以提高应用程序的性能，并减少文件传输的距离。GraphQL Admin API还为应用程序管理更多类型的媒体(如视频和3D模型)创造了机会。
该技术演示了不同的功能管理GraphQL API可以与北极星组件一起使用，为你的应用程序实现功能。在开发应用程序时，这个API中有大量的功能可供探索。
你对如何使用GraphQL和React上传文件有什么看法?请在下面的评论中告诉我们!
