对于.ttf，.woff和.woff2等字体文件，FileReader.readAsDataURL（）阅读器结果为空

Question

我正在构建一个允许用户上传自定义字体的Web界面。问题是我无法通过FileReader.readAsDataUrl（）将字体文件（特别是.ttf，.woff和.woff2文件）转换为base64，以便随后可以通过我的API放置这些文件。

我可以成功reasAsDataUrl .png和.jpg文件，并以base64编码的字符串的形式接收这些文件的数据，没问题。但是，当我尝试对.ttf，.woff或.woff2文件执行相同的操作时，尽管FileReader不会引发任何错误，但reader.result为空。

我正在使用输入元素来允许用户选择字体：

<input type="file" accept="application/font-woff" onChange={handleUpload}/>

handleUpload函数如下所示：

handleUpload: () => (event: Object) => {
   const { currentTarget: element } = event;

   if (!element.files) { return; }

   const file = element.files[0];

   const reader = new FileReader();
   reader.onerror = (error) => {
     console.error('Error: ', error);
   };
   reader.readAsDataURL(file);

   console.log(reader.result); // reader.result is empty
}

这是我传递给readAsDataURL函数的文件对象。

Answer 1

我想到了 ：-）

readAsDataURL运行成功，但是在读取完成之前我返回了reader.result。我将代码更改为包含

reader.addEventListener('load', () => {
  change(name, reader.result);
}, false);

现在可以了！

附加信息（编辑）：之所以对图像文件起作用，是因为在那些输入组件的onUpload函数中，我渲染了一个预览图像，这取决于完成加载的文件...作为等待的副作用为了呈现预览文件，我还确保在执行任何操作之前先加载文件。我很高兴意识到这一点，因为如果有一天，由于某种原因，我删除了图像预览片，那么我的图像上传也会中断！