Я пытался создать Angular 2/4 Service с возможностью загрузки файлов. Я не мог найти решение на каком-либо ресурсе, поэтому я, вероятно, хочу попросить вас, ребята. Итак, идея где-то в Компоненте есть поле ввода с типом = file. Он имеет директиву (изменение) = "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;
}
Итак, я понимаю, что операция выполняется async, но я не могу понять, как обернуть ее так, как она могла ждать, пока img будет загружаться. Я думаю, что это результат отсутствия навыков :( Когда я отправляю этот код в компонент, он, безусловно, работает, но моя идея - сделать сервис. Кроме того, я просто новичок в Angular. Итак, если есть лучший способ позаботьтесь об этой идее, я был бы рад услышать от вас. Спасибо!
Вы должны вернуть наблюдаемое так:
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
});