代码之家 › 专栏 › 技术社区 › Dmitriy Kavraiskyi

角度2/4文件读取器服务

filereader angular2-services angular javascript

Dmitriy Kavraiskyi · 技术社区 · 9 年前

我试图创建角度2/4服务,有可能上传文件。我在任何资源上都找不到解决方案,所以我可能想问你们。所以这个想法是在组件的某个地方,有一个类型为file的输入字段。它具有指令(change)=“uploadFile($event)”。

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加载。我认为这是技能缺乏的结果:( 当我把这段代码发布到组件中时,它肯定会工作,但我的想法是提供服务。而且,我只是一个角度的初学者。因此,如果有更好的方法来实现这个想法,我很高兴收到你的来信。谢谢

1 回复 | 直到 9 年前

user184994 9 年前

您应该返回这样的可观察值:

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

推荐文章

Sudharsan Venkatraj · 如何在Angular2中发布图像?

8 年前

Antony Sampath Kumar Reddy · 在angular 2及以上版本中发出“ng build--prod”命令时,为什么生成块文件

8 年前

Nasrul Bharathi · 如何在没有@Output decorator的情况下使用EventEmitter?

8 年前

Jayesh Ambali · TypeError:对象不支持属性或方法“map”-AngularJS2

8 年前

Prateek Ratnaker · 更新服务中声明的变量时更新组件变量

8 年前

Sakkeer A · 如何在单击Angular 2中的按钮时实现全屏窗口功能?

8 年前

Brijesh Mavani · 如何将angular 2服务中的数组传递给asp。net web API?

8 年前

Amit Sawant · 无法访问Angular 2组件中addEventListener()中的“this”上下文

8 年前

Miguel Teixeira · Angular2:Http。获取未定义的映射

8 年前

Muskett · Angular2向单页应用程序添加JSON数据

8 年前