Как сделать POST-запрос для каждого файла в массиве

Question

У меня есть массив файлов drag'n'dropped внутри углового компонента.Я хотел бы сделать запрос POST к http://some.url для каждого из них.Я пытаюсь сделать следующее:

drop.component.ts

public drop(event) {  
    * somehow set droppedFiles *

    let observables = [];

    this.droppedFiles.forEach(file => observables.push(this.uploadFile(file)));
    forkJoin(observables); 
}  

public uploadFile(image) {
    return this.imagesService.saveImage(image, this.tigerId).pipe(first()).subscribe(
        (data: ISaveImageResponse) => {
            console.log(data);

            return;
        },
        error => {
            console.error(error);

            return;
        }
    );
}

images.service.ts

public saveImage(image: File): Observable<ISaveImageResponse> {
    let imageInfo = {
        name: null, type: null, image: null
    };

    imageInfo.name = [image.name, Validators.required];
    imageInfo.type = [image.type, Validators.required];
    imageInfo.image = null;

    let form = this.formBuilder.group(imageInfo);
    form.get('image').setValue(image);

    const formModel = this.prepareFormData(form);

    return this.http.post<any>(
        'http://some.url',
        formModel
    ).pipe(
        map((imageInfo: any) => {
            return imageInfo
        }),
        catchError((error, caught) => {
            return EMPTY;
        })
    );
}

Если я удаляю один файл, это прекрасно работает.Но если существует несколько файлов, запросы становятся ожидающими , но я не вижу их зарегистрированных на сервере (который является сервером express.js).
В чем проблема?

ОБНОВЛЕНИЕ

Я обновил код, чтобы быть актуальным: теперь uploadImage() возвращает Observable и запросы вызываются с forkJoin()

ОБНОВЛЕНИЕ 2

Через некоторое время запросы ожидают В консоли сервера появляется следующая ошибка:

(node:1291) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 
11 field listeners added. Use emitter.setMaxListeners() to increase limit  

Но никакой информации о запросе не происходит вообще (для любого запроса, который я делаю, например console.log('POST /images');)

ОБНОВЛЕНИЕ 3

серверный код для обработки POSTзапросы:

server.js

const server = express();
const fs = require("fs");
const path = require('path');
const passport = require('passport');
const session = require('express-session');
const RedisStore = require('connect-redis')(session);

server.use(
    session({
        store: new RedisStore({
            url: config.redisStore.url
        }),
        secret: config.redisStore.secret,
        resave: false,
        saveUninitialized: false
    })
);
server.use( passport.initialize() );
server.use( passport.session() );
server.use( cors({ origin: '*' }) );
server.use( bp.json() );
server.use( express.static('uploads') );
server.use( require('./image.routes') );

const port = 9901;

server.listen(port, () => {
    const dir = __dirname + '/uploads';
    if (!fs.existsSync(dir)) {
        fs.mkdirSync(dir);
    }
    console.log('We are live on ' + port);
});  

image.routes.js

const fs = require('fs');
const formidable = require('express-formidable');
const path = require('path');
let router = express.Router();

router.post('/images',
    formidable({
        encoding: 'utf-8',
        uploadDir: path.resolve(__dirname, 'uploads'),
        multiples: true,
        keepExtensions: true
    }),
    (req, res, next) => {
        console.log('\nPOST /images');

        const image = req.fields;
        const data = req.files;

        image.path = data.image.path;

        const file = fs.createReadStream(image.path);

        createImage(image).then(  // createImage() saves image info to db
            result => {
                if (result) {
                    res.status(200).send(result);
                } else {
                    console.error("Cannot save image");
                    res.status(400).send("Cannot save image");
                }
        }).catch(e => console.error(e.stack));
});  

module.exports = router;

Answer 1

Вы не можете использовать Promise.all для обработки Rxjs запросов.

Вы можете использовать forkJoin для одновременного выполнения нескольких запросов Observale,

public drop(event) {  
* somehow set droppedFiles *

   let observables = []

   this.droppedFiles.forEach(file => observables.push(this.uploadFile(file)));
   Rx.Observable.forkJoin(observables)
} 

Кроме того, ваша uploadFile функция не возвращает наблюдаемый

   public uploadFile(image) {
      return this.imagesService.saveImage(image, this.tigerId).pipe(first())
   }

посмотрите пример № 5 здесь

Answer 2

Попробуйте использовать 'map' или 'for' вместо forEach.

public drop(event) {  
    * somehow set droppedFiles *

    Promise.all(this.droppedFiles.map(file => this.uploadFile(file))); 
}