文件阅读器 Angular 2答案

【问题标题】：FileReader Angular 2文件阅读器 Angular 2
【发布时间】：2026-02-17 06:05:01
【问题描述】：

我正在尝试上传组件A中的图片，并将上传图片的base 64数据发送到组件B。我在组件 A

中遇到问题

HTML：

 <input type="file" id="hotspot" (change)="uploadHotSpot($event)">

TS 文件：

 uploadHotSpot($event){
    var file:File = $event.target.files[0]; 
    var reader:FileReader = new FileReader();

    if (file) {
      reader.readAsDataURL(file); //reads the data as a URL
      this.pin = reader.result;
      console.log(this.pin);
    }
}

问题：当我上传图像并保持开发人员工具打开时，我能够在控制台日志中获取 base 64 数据，但是当调试器工具关闭并且我正在尝试上传图像时我将 console.log 设为空白.....有什么想法吗？

【问题讨论】：

快速提问：如果你只在两个组件之间共享图像，为什么不直接发送图像而不是 base64 呢？
我不确定您的问题。我想要做的是用户在组件 A 上上传图像，这将在组件 B 中可见
那你为什么要把它转换成 base64 呢？你不需要。
你可以指导什么方法？
对于初学者来说，也许你应该提供一个minimal reproducible example，因为现在，你甚至没有两个组件。

标签： javascript angular typescript filereader

【解决方案1】：

因为它现在是这样工作的。您应该创建一个onload 回调来获得结果。像这样：

uploadHotSpot($event) {
    var file:File = $event.target.files[0]; 
    var reader:FileReader = new FileReader();

    reader.onload = () => {
      this.pin = reader.result;
      console.log(this.pin);
    };

    if (file) {
      reader.readAsDataURL(file); //reads the data as a URL
    }
}

【讨论】：