FileReader.readAsDataURL()读取字体文件（如.ttf、.woff和.woff2）时，读取结果为空。

Question

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

我可以成功地读取.png和.jpg文件，并接收这些文件的数据作为base64编码字符串，没有任何问题。然而，当我尝试使用.ttf、.woff或.woff2文件进行相同的操作时，reader.result为空，尽管FileReader没有抛出任何错误。

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

<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函数的文件对象。

这个。

- Caledonia Thomson

Answer 1

我明白了 :-)

readAsDataURL 已经成功运行，但在读取完成之前我返回了 reader.result。我修改了代码以包含。

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

现在它正在工作！

附加信息（编辑）：之所以对于图像文件可以工作是因为在这些输入组件的onUpload函数中，我正在呈现依赖于文件加载完成的预览图像...等待文件以呈现预览的副作用是，在之后处理文件之前确保文件已加载。我很高兴意识到这一点，因为如果有一天，出于某种原因，我删除了图像预览部分，我的图像上传也将失败！

- Caledonia Thomson