Uploadprogress in Ionic

Question

У меня есть бланк, в котором пользователь может добавить информацию и добавить изображения. Изображения кодируются base64, поэтому все хранится в объекте json. Этот объект отправляется на сервер (с $resource), когда пользователь отправляет его.

Если пользователь добавляет, например, 3 изображения с размером около 2 МБ на изображение, имеет дерьмовое соединение, такое как Edge, и хочет его загрузить, похоже, что он навсегда. Пользователь просто видит наложение $ionicLoading без информации о том, сколько времени потребуется или сколько% уже загружено.

UX плохо, потому что пользователь мог предположить, что приложение застыло или находится в бесконечном цикле и что это просто плохое приложение.

я следующие идеи, но не идея, если они возможны или

1. Есть ли способ в угловой, Кордове или ионной получить browserinformation сколько% уже загружены?
2. Есть ли способ получить текущую скорость загрузки? Я мог бы получить размер моего объекта, получив length моего объекта stringified JSON, разделив его 1024, чтобы получить kB. Затем я буду проверять текущую загрузку каждую секунду и добавлять текущую загрузку к переменной. С этой информацией я мог рассчитать загруженный% приблизительно
3. JQuery ajaxForm Plugin?

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.