如何使用shopify Polaris DropZone组件上传图像

Question

我正在使用Polaris开发一个用于Shopify的应用程序，并且需要使用DropZone组件上传一个图像，但是我找不到如何获取base64文件。基于文档，在onDrop事件中，

我可以得到图像文件：

​

此外，我还可以用以下代码将其转换为blob：

window.URL.createObjectURL(files[0])

然后，我想将文件转换为base64，我如何做到这一点？

Answer 1

Polaris DropZone组件作为一个HTML输入，因此除了UI和设计之外，输入和DropZone之间没有任何重大的区别。它返回一个文件对象，您应该在加载图像时加载它，如下所示：

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

现在您可以访问blob，并且必须使用将此blob转换为base64。

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