javascript - 如何使用 shopify Polaris DropZone 组件上传图片

Question

我正在使用 Polaris 为 Shopify 开发应用程序，需要使用DropZone 组件上传图像，但我找不到如何获取 base64 文件。根据文档，在 onDrop 事件中，

我可以获取图像文件：

我也可以使用以下代码将其转换为 blob：

window.URL.createObjectURL(files[0])

然后我想将文件转换为base64，我该怎么做？

标签： javascriptreactjsshopifypolaris

Answer 1

Polaris DropZone 组件作为 HTML 文件输入工作，因此输入和 DropZone 之间没有任何主要区别，除了 UI 和设计。它返回一个文件对象，你应该像这样加载图像一样加载它：

var reader = new window.FileReader()
reader.readAsDataURL(files[0])

现在您可以访问 blob 并且必须将此 blob 转换为 base64：

reader.onload = function () {
  var base64data = reader.result
}