时间戳

首页 > 解决方案 > 在 (Angular)TypeScript 中使用 FileReader 读取文本文件

javascript - 在 (Angular)TypeScript 中使用 FileReader 读取文本文件

问题描述

试图阅读简单的文本文件，但似乎没有阅读。当我选择图像时，它可以工作，但是当我选择文本文件或 word doc 时，它会告诉我：sanitizing unsafe URL value

这是我正在使用的代码：

onFilePicked(event: Event) {
    const filePicked = (event.target as HTMLInputElement).files[0];
    this.form.patchValue({ file: filePicked });
    this.form.get('file').updateValueAndValidity();
    const reader = new FileReader();
    reader.onload = () => {
      this.filePreview = reader.result;
    };
    reader.readAsDataURL(filePicked);
  }

这是 HTML 代码

<div>
     <button class="btn btn-outline-info btn-sm" type="button" 
     (click)="filePicker.click()">Pick File</button>
     <input type="file" #filePicker (change)="onFilePicked($event)">
     </div>

     <div class="file-preview" *ngIf="filePreview !== '' && filePreview && 
     form.get('file').valid">
      <img [src]="filePreview" [alt]="form.value.title">
</div>

有没有人发现错误，我一直在阅读其他帖子，但他们使用 jQuery。欢迎任何解决此错误的想法，谢谢！

标签： javascriptfilereader

解决方案

对于 word 文档或文本，而不是已reader.readAsUrl(filePicked); 更改为reader.readAsText(filePicked);. 此外，在显示信息时，一个小错误是使用<img>标签而不是普通的 div 标签。

推荐阅读