Angular 2/4 FileReader服务

Question

我试图创建Angular 2/4服务,可能上传文件.我找不到任何资源的解决方案,所以我可能想问你们.所以这个想法在Component的某个地方有输入字段,其中type = file.它有指令(change)="uploadFile($ event)".在组件.ts文件中:

uploadFile(event) {
   this.images.push(this.uploadImgService.uploadImage(event));
}

UploadImgService看起来像这样:

private img: string;

uploadImage(e) {
  const file = e.target.files[0];
  const pattern = /image-*/;

  if (!file.type.match(pattern)) {
    alert('You are trying to upload not Image. Please choose image.');
    return;
  }
  const reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onloadend = () => {
    this.img = reader.result;
  };

  return this.img;
}

所以,我知道操作是异步的,但我无法弄清楚如何将它包装起来,直到img加载为止.我认为这是技能缺乏的结果:(当我将这些代码发布到组件中它肯定有效,但我的想法是提供服务.而且,我只是Angular的初学者.所以,如果有更好的方法重新定义这个想法我很高兴收到你的来信.谢谢!

Answer 1

你应该像这样返回一个observable:

uploadImage(e) {
  const file = e.target.files[0];
  const pattern = /image-*/;

  if (!file.type.match(pattern)) {
    alert('You are trying to upload not Image. Please choose image.');
    return;
  }
  const reader = new FileReader();
  reader.readAsDataURL(file);
  return Observable.create(observer => {
    reader.onloadend = () => {
      observer.next(reader.result);
      observer.complete();
    };
  });
}  

在组件中,订阅observable:

this.service.uploadImage(event).subscribe((img) => {
    // Do what you want with the image here
});