Angular 2 和 Vanilla JS：在进行 http 调用之前等待图像加载

Question

我正在使用一项服务在服务器上上传图像。在这里：

addPictures(files: File[], folder: string): Observable<Parse.Object[]> {
let hasError = false;
for (let file of files) {
let [type, ext] = file.type.split('/');
if (type.toLowerCase() !== 'image' || !environment.imgExts.includes(ext.toLowerCase())) { hasError = true; }
}
if (hasError) { return Observable.throw('Invalid extension detected'); }
let observables: Observable<Parse.Object>[] = [];
for (let file of files) {
// Get its size
let img = new Image();
img.onload = () => {
// Create the Parse document
let parseImg = { url: '', type: file.type, width: img.width, height: img.height };
// Upload it on Amazon and add it to DB
observables.push(this.addPicture(parseImg, file, folder));
console.log('pushing to array');
}
img.src = window.URL.createObjectURL(file);
}
console.log('forkjoin');
return Observable.forkJoin(observables);
}

所有功能都很好用。我面临的问题是，当我使用img.onload时，forkJoin不会在发射前等待它。我想要的是等待所有图像加载，然后触发 thr forkJoin 将它们全部发送。

我已经尝试过使用一个条件(当最后一项被推送到数组时，触发 forkJoin(，带有一个主题，但问题是我的组件返回了一条错误，如下所示Cannot read property 'subscribe' of undefined。

编辑这是我的代码来自事件：

addPictures(files: File[], folder: string): Observable<Parse.Object[]> {
let hasError = false;
for (let file of files) {
let [type, ext] = file.type.split('/');
if (type.toLowerCase() !== 'image' || !environment.imgExts.includes(ext.toLowerCase())) { hasError = true; }
}
if (hasError) { return Observable.throw('Invalid extension detected'); }
let observables: Observable<Parse.Object>[] = [];
for (let file of files) {
// Get its size
let img = this.fromImgEvent(file, window.URL.createObjectURL(file), folder);
observables.push(img);
}
console.log('forkjoin');
return Observable.forkJoin(observables);
}
fromImgEvent(file: File, url: string, folder: string) {
return Observable.create(observer => {
let img = new Image();
img.onload = () => {
// Create the Parse document
let parseImg = { url: '', type: file.type, width: img.width, height: img.height };
// Upload it on Amazon and add it to DB
observer.next(this.addPicture(parseImg, file, folder));
observer.complete();
}
img.src = url;
});
}

Answer 1

例如，您可以使用Observable.fromEvent或自己创建一个可观察量来加载图像，如下所示：

addPictures(files: File[], folder: string): Observable<Parse.Object[]> {
let hasError = false;
let data$ = files.map(file => {
let [type, ext] = file.type.split('/');
if (type.toLowerCase() !== 'image' || !environment.imgExts.includes(ext.toLowerCase())) { 
hasError = true;
}
return Observable.create(observer => {
let image = new Image();
image.src = window.URL.createObjectURL(file);
image.onload = (e) => {
let parsedImage = { url: '', type: file.type, width: image.width, height: image.height };
observer.next({ parsedImage, file });
observer.complete();
};
});
};
if (hasError) { 
return Observable.throw('Invalid extension detected');
}
return Observable
.forkJoin(data$)
.toArray()
.switchMap(([parsedData]) => {
return Observable.forkJoin(
parsedData.map(data => {
return this.addPicture(data.parsedImage, data.file, folder)
})
);
});
}