javascript - XMLHttpRequest.upload.onprogress 不适用于 HTTPS

Question

问题

我有一个页面，用户可以在 FormData 和 XMLHttpRequest 的帮助下上传文件。上传文件工作正常。但是 upload.onprogress 仅在从 HTTP 连接上传时起作用。

HTTPS

HTTP

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

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

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 (server.js)

Node.Js (upload-file.js)

Angular Service (editor-file.service.ts)

注意事项

请注意，我已经就此主题提出了问题。但我没有得到有效的答案，我真的需要它来工作。

老问题:XHR upload onprogress Event not Working on HTTPS Connection

Answer 1

在以下之间设置 Listener 很重要:

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

...put you listener here....

xhr.send(data)

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