XMLHttpRequest.upload.onprogress 不适用于 HTTPS

Issue

我有一个页面，用户可以在其中上传文件FormData and an XMLHttpRequest。 上传文件工作正常。但是upload.onprogress is only上传时工作从 HTTP 连接.

HTTPS

HTTP

我已经在 Heroku 和 Amazon EC2 实例上对此进行了测试。但总是一样的：

• 通过 HTTP 上传时会显示进度
• 通过 HTTPS 上传时永远不会触发 Progress 事件

JavaScript（Angular 7）

const xhr = new XMLHttpRequest();
let progress = 0;


/** THIS EVENT IS NOT WORKING WITH HTTPS */
xhr.upload.onprogress = (event: ProgressEvent) => {
    if (event.lengthComputable) {
        progress = 100 * (event.loaded / event.total);
    }
};


xhr.responseType = 'json';
xhr.open('POST', `${API_URL}/${this.API_PATH}/upload`, true);
xhr.setRequestHeader('authorization', this.authService.getAuthToken());
xhr.send(payload);
xhr.onload = () => {
    observer.next(xhr.response);
    observer.complete();
};

Node.Js

const busboyBodyParser = require('busboy-body-parser');
app.use(busboyBodyParser())

const busboy = new Busboy({ headers: req.headers })
busboy.on('finish', async () => {

    const fileData = req.files.file
    const fileId = req.body.fileId
    const params = {
        Body: fileData.data,
        Bucket: awsConfig.bucket,
        ContentType: fileData.mimetype,
        Key: fileId,
        StorageClass: 'ONEZONE_IA',
    }
    awsConfig.s3.upload(params, (err, data) => { /* ... */ }

})
req.pipe(busboy)

我也尝试过

我也尝试使用.addEventListener监听进度的语法：

xhr.upload.addEventListener("progress", uploadProgress, false);

但这也不起作用。

源代码

Node.Js（服务器.js） https://github.com/skatestyle/drakery-server/blob/master/server.js

Node.Js（上传文件.js） https://github.com/skatestyle/drakery-server/blob/master/api/files/upload-file.js

Angular 服务（编辑器文件.service.ts） https://github.com/skatestyle/drakery-client/blob/master/src/app/features/seller/product-management/services/editor-file.service.ts

Notes

请注意，我已经提出了有关此主题的问题。但我没有得到有效的答案，我真的需要它才能发挥作用。

老问题：XHR 上传 onprogress 事件不适用于 HTTPS 连接 https://stackoverflow.com/questions/54913923

将 Listener 设置为以下值很重要：

xhr.open('POST'...);

...put you listener here....

xhr.send(data)

在这种情况下它会起作用！