android - Ionic 中的上传进度

Question

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

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

UX 很糟糕，因为用户可能会认为应用程序卡住了或处于无限循环中，这只是一个糟糕的应用程序。

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

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

Answer 1

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

假设您的服务器设置为处理 XHR2 并返回内容长度，在纯 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'}));

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

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

我见过使用特殊 angular directive 的实现为此而写，甚至使用 jQuery file upload实现。