javascript - 道场 1.10 和 XHR : progress callback not called

Question

我正在使用 Dojo 1.10 将文件上传到服务器。对于上传，我使用模块 dojo/request/xhr 并尝试以百分比显示进度。我很困惑，进度回调只在传输结束时触发一次。文件传输成功。查看我的代码片段:

function uploadFile(){
  require([
    'dojo/dom',
    'dojo/request/xhr'
  ], function(dom, xhr) {
    //... some unimportant code here
    // Upload file now:
    xhr(targetURL, {
    handleAs: 'text',
    method: 'POST',
    headers: {'X-CSRF-Token': getAuthToken(), 'accept-charset': 'UTF-8'},
    data: formData
    }).then(function(data){
      // Success => refresh file list
      refreshDocList();
    }, function(err){
      // Failed
      uploadFailed(err);
    }, function(evt){
      // Progress of upload
      console.log(evt);
      dom.byId('progress').innerHTML = 'Done ' + (evt.loaded * 100 / evt.total) + '%'; 
    });
  });
}

我在 FireFox (45.0.1, Windows 8.1), Chrome (49.0.2623.110 m, Windows 8.1), MSIE (11.0.9600.18231, Windows 8.1), FireFox (44.0, Ubuntu 15.04), Chrome (48.0. 2564.116，Ubuntu 15.04)。在上述浏览器中，进度回调均未按预期调用。有什么提示可以解决我的问题吗？

Answer 1

在 dojo/request 中似乎没有任何方法可以做到这一点。您需要直接使用 XMLHttpRequest。

原因是进度事件仅针对下载部分发出。对于上传部分，您需要使用 XHR 对象的 upload 成员，如下所示:

var oReq = new XMLHttpRequest();

oReq.upload.addEventListener("progress", updateProgress);
oReq.upload.addEventListener("load", transferComplete);
oReq.upload.addEventListener("error", transferFailed);
oReq.upload.addEventListener("abort", transferCanceled);

oReq.open();

查看 dojo/request/xhr source code ，我认为没有任何简单的方法可以让 dojo/request/xhr 公开 XHR 对象(并通过扩展 upload 成员)。因此，您可能需要直接使用 XMLHttpRequest。

有关更多信息，请参阅 https://developer.mozilla.org/en/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest