我正在构建一个允许用户上传自定义字体的 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 函数的文件对象。
最佳答案
我想到了 :-)
readAsDataURL 工作成功,但我在读取完成之前返回了 reader.result。我更改了我的代码以包含
reader.addEventListener('load', () => {
change(name, reader.result);
}, false);
现在它开始工作了!
附加信息(编辑): 它对图像文件起作用的原因是因为在这些输入组件的 onUpload 函数中,我正在渲染一个预览图像,该图像取决于正在加载的文件......作为副作用等待文件以呈现预览,我还确保在我之后对其进行任何操作之前已加载该文件。我很高兴意识到这一点,因为如果有一天,出于某种原因,我删除了图像预览片,我的图像上传也会损坏!
关于javascript - FileReader.readAsDataURL() 读取器结果为 .ttf、.woff 和 .woff2 等字体文件为空,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/51315832/