XHR 上传 onprogress 事件在 HTTPS 连接上不起作用

Question

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

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

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

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

Angular 服务（前端）

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);
        })
})

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

我真的很感谢每一个帮助！

谢谢

Answer 1

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

        ...
        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回调不能正常工作）：

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 });
    }
};

试试这个，希望对你有帮助，祝你有美好的一天