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
}

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

Answer 1

我知道了：-）

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

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

现在可以正常工作了！

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

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

1 个答案: