我在 Angular 17 中使用 Filereader() 时遇到打字错误

Question

我遇到了这个打字错误，但我无法弄清楚。我用谷歌搜索过，但似乎找不到答案。

TypeError：FileReader.readAsDataURL 的参数 1（'blob'）必须是一个 Blob 的实例

这是我的组件方法：

onFilePick(event: Event) {
    const file = (event.target as HTMLInputElement).files;
    //console.log(file);
    // console.log(this.form);
    this.form.patchValue({ Image: file });
    this.form.get('image')?.updateValueAndValidity();
    const reader: any = new FileReader();
    reader.onload = () => {
      this.imagePreview = reader.result;
    };
    return reader.readAsDataURL(file);
  }

Answer 1

乍一看，

file

看起来像是一个斑点数组。

改变

const file = (event.target as HTMLInputElement).files;

到

const file = (event.target as HTMLInputElement).files[0];

通过索引获取第一个文件。

您可能还想检查文件是否存在。类似的东西

const files = (event.target as HTMLInputElement).files;
const file = files[0];

if(!file){
    return;
}