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

Question

我正在构建一个允许用户上传自定义字体的 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 函数的文件对象。

Answer 1

我想通了:-)

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

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

现在可以使用了！

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

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

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

javascript

web

filereader

webfonts

woff