FileReader角2

Question

我正在尝试上传组件A中的图像，并将上传图像的基本数据发送到组件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);
    }
}

问题:当我上传映像并保持开发工具打开时，我可以在控制台日志中获得基本64数据，但是当调试器工具关闭时，我试图将正在获取的图像作为空白上传console.log……有什么想法吗？

Answer 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
    }
}