angular - 在 Angular5/6 中的 onload 方法之外访问文件阅读器内容?
问题描述
我正在尝试读取具有以下代码片段的文件。
readFile(file: File) {
var reader = new FileReader();
console.log(reader.readyState);
reader.onload = () => {
console.log(reader.result);
};
reader.readAsText(file);
}
正如预期的那样,console.log() 在阅读器的 onload 事件中打印文件的内容。但是,我试图从我的readFile
方法中提取这个输出作为返回值。
例如,
onSubmit() {
let output = this.readFile(this.newImportForm.value.dataFile);
console.log(output);
}
如何将文件内容作为字符串返回?我可以组合一个涉及发出事件和做一些复杂事情的解决方案,但我想探索一个更优雅的解决方案。
提前致谢 :)
解决方案
您不能直接返回字符串,因为FileReader
异步读取内容。
一个更优雅的解决方案是从readFile
. 例如
readFile(file: File): Observable<string> {
const sub = new Subject<string>();
var reader = new FileReader();
reader.onload = () => {
const content: string = reader.result as string;
sub.next(content);
sub.complete();
};
reader.readAsText(file);
return sub.asObservable();
}
这样你就可以像这样订阅返回的 Observable
fileSelected(ev) {
const file = ev.target.files[0];
this.readFile(file).subscribe((output) => {
console.log(output);
})
}
推荐阅读
- node.js - 使用 OAuth2 nodejs 获取 Google Cloud Platform 中的用户项目列表
- javascript - React 上的“TypeError:无法读取未定义的属性‘状态’”
- google-sheets - 倒计时公式不起作用:包括公式中的文本
- css - 反应 onMount 动画
- bash - 远程执行命令 | 仅保留 5 个最近的文件/目录
- html - 如何将 SCSS 添加到 Angular 库的组件中
- c++ - 反向字符串和回文
- django - 表单无效时,FormView get_context_data 不起作用
- c++ - DBus 上的 BlueZ 在不同的时间间隔内停止响应
- python - “解压”一个熊猫系列,复制 DataFrame 的其他值