Ionic 中的上传进度

Question

我有一个表单，用户可以在其中添加信息和添加图像。图像是 base64 编码的，因此所有内容都存储在 json 对象中。当用户提交时，这个对象被发送到服务器（$resource）。

如果用户添加了例如 3 张图片，每张图片大约 2MB，有像 Edge 这样糟糕的连接，并且想要上传它似乎要花很长时间。用户只会看到 $ionicLoading 叠加层，而没有信息需要多长时间或已经上传了多少百分比。

用户体验很糟糕，因为用户可能会认为该应用程序已冻结或处于无限循环中，并且它只是一个糟糕的应用程序。

我有以下想法，但不知道它们是否可行或

有没有办法在 angular、cordova 或 ionic 中获取浏览器信息已经上传了多少百分比？
有没有办法获取当前的上传速度？我可以通过获取 stringified JSON 对象的 length 来获取对象的大小，将其除以 1024 以获得 kB。然后我会每秒检查一次当前的上传速度并将当前的上传速度添加到一个变量中。有了这些信息，我可以计算出大约
JQuery ajaxForm 插件？

Answer 1

听起来您正在寻找的是来自 XHR2 的进度事件。

假设您的服务器设置为处理 XHR2 和 return 内容长度，简单来说 JavaScript:

function upload(blobOrFile) {
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/server', true);
  xhr.onload = function(e) { ... };

  // Listen to the upload progress.
  var progressBar = document.querySelector('progress');
  xhr.upload.onprogress = function(e) {
    if (e.lengthComputable) {
      progressBar.value = (e.loaded / e.total) * 100;
      progressBar.textContent = progressBar.value; // Fallback for unsupported browsers.
    }
  };

  xhr.send(blobOrFile);
}

upload(new Blob(['hello world'], {type: 'text/plain'}));

上传速度也可以使用 return 在进度事件中输入的信息来计算，如您所述。

至于 AngularJS/Ionic 中的实现，这似乎是 $http 不真正支持进度事件的框架内长期存在的 issue。

我见过使用特殊 angular directive written for this, or even utilize a jQuery file upload 实现的实现。

Ionic 中的上传进度

Uploadprogress in Ionic

android

user-experience

angularjs

cordova

ionic-framework