XHR上传onprogress事件不能在HTTPS连接上工作 [英] XHR upload onprogress Event not Working on HTTPS Connection

问题描述

我有一个通过Angular 7和Node.Js将文件上传到AWS S3的设置。上传工作正常。但是 xhr.upload.onprogress 事件存在问题。

I have a setup for uploading files to AWS S3 via Angular 7 and Node.Js. The upload works fine. But there is an issue with the xhr.upload.onprogress event.

此事件仅在托管时触发服务器通过 http 。当使用 https 连接时，事件不会被触发一次。

This event is only triggered when hosting the server via http. When using an https connection, the event isn't triggered once.

我在heroku和我的EC2上测试过它实例并得出结论只有 http 有效。因此，通过 https 托管在AWS上的我的生产应用程序也不起作用。

I tested it on heroku and my EC2 instance and came to the conclusion that only http works. Therefore, my production app hosted on AWS via https, doesn't work, either.

这是代码（如果需要更多细节，请写评论）：

Here is the code (write a comment if more details are needed):

角度服务（前端）

const xhr = new XMLHttpRequest();
let progress = 0;
xhr.upload.onprogress = (event: ProgressEvent) => {
    console.log('xhr on upload', event);
    if (event.lengthComputable) {
        progress = 100 * (event.loaded / event.total);
        console.log('file upload progress', { progress, file });
    }
};
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();
    alive = false;
};

Node.Js

module.exports = async (req, res) => {
    try {
        const busboy = new Busboy({ headers: req.headers })
        busboy.on('finish', async () => {
            const fileData = req.files.file
            const fileId = req.body.fileId
            await uploadToAws(fileData)
            // ...
        })
        req.pipe(busboy)
    } catch (err) { /* ... */ }
}
const uploadToAws = async (fileData, file) => {
    return new Promise((resolve, reject) => {
        const params = {
            Body: fileData.data,
            Bucket: awsConfig.buckets.drakery,
            ContentType: fileData.mimetype,
            Key: `mykey`,
            StorageClass: 'ONEZONE_IA',
        }
        awsConfig.s3
        .upload(params, (err, data) => err ? reject(err) : resolve(data.Location))
        .on('httpUploadProgress', function (evt) {
            console.log('httpUploadProgress', evt);
        })
})

我真的很困惑为什么这是发生。我在网上找不到任何关于这个问题的资源。

I am really confused why this is happening. I couldn't find any resources online on this problem.

我非常感谢你的每一个帮助！

I am really thankful for every help!

谢谢

推荐答案

这是我用于网络项目的基本js代码：

this is my basic js code that I have used for a web project:

        ...
        var xhr = new XMLHttpRequest();

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

        xhr.addEventListener("load", uploadComplete, false);

        xhr.addEventListener("error", uploadFailed, false);

        xhr.addEventListener("abort", uploadCanceled, false);

        xhr.open("POST", "/controller");
        // fd : formData
        xhr.send(fd);

    }

    function uploadProgress(evt) {

        if (evt.lengthComputable) {

            var percentComplete = Math.round(evt.loaded * 100 / evt.total);
            ...
        }

        else {

            ...
        }

    }

正如你所看到我在进度上添加了一个事件监听器，我没有覆盖其他回调函数就像你做的那样（=）（也许https使用另一个回调并覆盖onprogress，就像你回调一样无法正常工作）：

As you can see I'm adding an event listener on 'progress', I'm not overwriting the other callback function like you do with (=) ( maybe https uses another callback and by overwriting the onprogress like you do the callback does not work properly ):

xhr.upload.onprogress = (event: ProgressEvent) => {
    console.log('xhr on upload', event);
    if (event.lengthComputable) {
        progress = 100 * (event.loaded / event.total);
        console.log('file upload progress', { progress, file });
    }
};

试试这个，希望它可以帮助你，度过美好的一天

Try this out, hope it helps you, have a nice day

这篇关于XHR上传onprogress事件不能在HTTPS连接上工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！