FileReader.readAsDataURL() reader .ttf、.woff 和 .woff2 等字体文件的结果为空

FileReader.readAsDataURL() reader result is empty for font files such as .ttf, .woff, and .woff2

我正在构建一个允许用户上传自定义字体的 Web 界面。问题是我无法通过 FileReader.readAsDataUrl() 将字体文件(特别是 .ttf、.woff 和 .woff2 文件)转换为 base64,这样我就可以通过我的 [=27 PUT 这些文件了=].

我可以成功地 reasAsDataUrl .png 和 .jpg 文件,并接收这些文件的数据作为 base64 编码的字符串,没问题。但是,当我尝试对 .ttf、.woff 或 .woff2 文件做同样的事情时,reader.result 是空的,尽管 FileReader 没有抛出任何错误。

我正在使用输入元素来允许用户select一种字体:

<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
}

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

我想通了:-)

readAsDataURL 工作成功,但我在读取完成前返回 reader.result。我更改了我的代码以包含

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

现在可以使用了!

附加信息(编辑): 它对图像文件起作用的原因是因为在这些输入组件的 onUpload 函数中我渲染了一个预览图像,它依赖于文件正在加载...作为等待文件以呈现预览的副作用,我还确保在我之后对它做任何事情之前加载文件。我很高兴意识到这一点,因为如果有一天,出于某种原因,我删除了图片预览部分,我的图片上传也会崩溃!