Javascript 如何获得文件读取器的结果

因此，我的html中有一个onchange事件，它从用户那里获取一个图像，需要将其转换为数据url，以便通过socket.io发送并存储在数据库中。如何获得文件读取器对象的结果。我不知道如何传递回叫

我需要做的是在文件读取器onload事件中获得一个回调函数，这样我就可以将图片变量设置为数据url，然后通过套接字发送。只需要帮助从文件读取器获取全局变量的结果 //HTML

//js代码

setpreview(event) {
  var img = <File>event.target.files[0];
  var reader = new FileReader();
  reader.onload = function() {
    console.log(reader.result);
  }

  reader.readAsDataURL(img);
}

setpreview（事件）{
var img=event.target.files[0]；
var reader=new FileReader（）；
reader.onload=函数（）{
console.log（reader.result）；
}
reader.readAsDataURL（img）；
}

您只需将结果分配给一个作用域变量，并在模板中使用它即可

srcImg = null; //declare this

setpreview(event) {
  const comp = this;
  const img = <File>event.target.files[0];
  const promise = new Promise((resolve) => {
    const reader = new FileReader();
    reader.onload = function () {
      resolve(reader.result);
    }
    reader.readAsDataURL(img);
  });

  promise.then(img => {
    comp.srcImg = img;
    // if you want to do anything with img you can do it here
  });
}

srcImg=null//申报
设置预览（事件）{
const comp=此；
const img=event.target.files[0]；
常量承诺=新承诺（（解决）=>{
const reader=new FileReader（）；
reader.onload=函数（）{
解析（reader.result）；
}
reader.readAsDataURL（img）；
});
承诺。然后（img=>{
comp.srcImg=img；
//如果你想用img做任何事情，你可以在这里做
});
}

---

更新的Stackblitz:

这是因为您只在

setpreview

方法中声明了

reader

变量，该变量不会出现在函数范围之外，正如错误所示。有没有办法将回调函数放入setpreview函数中？我试着通过html来实现它，但没有成功。你是一个绝对的上帝派来的人，不知道你可以用一个变量作为其他范围变量的接口。非常感谢你！很高兴它起作用了。我添加了一个承诺，这样你就可以将它存储在db或任何地方，你可以用不同的方法提取逻辑，如果你喜欢的话，但你可以在reader.onload函数中执行你的活动，如果不这样做，就失去承诺；对你来说什么都重要。

srcImg = null; //declare this

setpreview(event) {
  const comp = this;
  const img = <File>event.target.files[0];
  const promise = new Promise((resolve) => {
    const reader = new FileReader();
    reader.onload = function () {
      resolve(reader.result);
    }
    reader.readAsDataURL(img);
  });

  promise.then(img => {
    comp.srcImg = img;
    // if you want to do anything with img you can do it here
  });
}

<input type = 'file' (change) = "setpreview($event)" value = 'upload photo'>
<img [src]="srcImg" *ngIf="srcImg" />