javascript - 如何对数组中的每个文件发出 POST 请求

Question

我在 Angular 组件中有一系列拖放文件。我想为每个请求向 http://some.url 发出 POST 请求。我正在尝试执行以下操作:

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 here