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 加载的方式包装它。我认为这是缺乏技能的结果:( 当我 post 将此代码放入组件时它确实可以工作，但我的想法是提供服务。另外，我只是 Angular 的初学者。所以，如果有更好的方法来实现这个想法，我很乐意听取您的意见。谢谢！

Answer 1

您应该 return 像这样的可观察对象：

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();
    };
  });
}

并在组件中订阅可观察对象：

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

Angular 2/4 FileReader 服务

Angular 2/4 FileReader Service

javascript

filereader

angular2-services

angular