如何从XHR回调中引用`postMessage（）`函数？

Question

文件上传工作完美，我无法获得progess和load个回调事件

我在JavaScript文件中有以下内容作为我的WebWorker代码：

UploadFileWorker.js

function uploadFile(url, m) {
    var f = m.file;
    var fd = new FormData();
    fd.append('file', f, f.name);
    var xhr = new XMLHttpRequest();
    xhr.upload.addEventListener('progress', function (e) {
        m.set('status', (e.loaded / e.total) * 100 );
        postMessage(m); // <-- never makes the call, doesn't throw and error either
    });
    xhr.upload.addEventListener('load', function (e) {
        m.set('status',100);
        postMessage(m); // <-- never makes the call, doesn't throw and error either
    });
    xhr.open('POST', url, true);
    xhr.send(fd);
}

function getUploadURL(m) {
    var xhr = new XMLHttpRequest();
    xhr.addEventListener('load', function () {
        var url = this.responseText;
        uploadFile(url,m);
    });
    xhr.open('GET', '/upload', false);
    xhr.send();
}

var q = [];

onmessage = function(e) {
    postMessage(e.data);
    q.push(e.data);
    while (q.length > 0) {
        var m = q.pop();
        getUploadURL(m);
    }
};

postMessage(e.data);功能中的onmessage完美无缺。

postMessage(m);回调中的xhr.upload.addEventListeners()永远不会发生。在我尝试将这些函数移动到WebWorker代码之前，它们工作正常。

这是一个范围问题吗？ 如果是这样，我该如何为调用加前缀以使它们起作用。？

为了完整起见，这里是我如何定义Worker的实例并将其踢掉。

onButtonClick: function(button, e, eOpts) {
    var ugv = this.getUploadGridView();
    var fs = this.getFileUploadStore();
    var worker = new Worker('/js/UploadFileWorker.js');
    worker.onmessage = function(e) {
        console.log(e);
    };

    var selected = ugv.getSelectionModel().getSelection();

    Ext.each(selected, function(m) {
        var o = {};
        o.name = m.get('name');
        o.size = m.get('size');
        o.status = m.get('status');
        o.file = m.file;
        worker.postMessage(o);
    });
},

再次实际上传文件效果很好，我无法弄清楚如何从postMessage();回调中调用xhr。

Answer 1

这显然是最近修复的错误。

问题71433002：为Workers启用XHR上传进度事件。 （闭合）

解决方法，直到Chrome更新

xhr.addEventListener(

而不是

xhr.upload.addEventListener(

这样做的缺点是progress只会为每个1MB调用，小于1MB的文件永远不会被progress个事件触发。