Индикатор загрузки файлов на сервер

Question

Делаю индикатор загрузки файлов на сервер. Использую Vue.JS и Axios. Процент загрузки меняется. Но в момент, когда процент загрузки 100%, ответ от сервера об успешности отправки еще не получен. Требуется еще время. Получается, что индикатор работает не так, как хотелось бы. Что я делаю не так?

<template>
   <p>Загружено {{progress}} %</p>
</template>

methods: { 
fileSubmit(){
                const fd = new FormData();
                async function submitFiles(){
                    let file = this.files[0];
                        fd.append('file', file);
                        await vue.axios
                            .post('...', fd,{
                                onUploadProgress: e => {
                                    this.progress = Math.round(e.loaded * 100 / e.total);
                                }
                            })
                            .then(() => {
                                console.log('Файл отправлен');
                            })
                            .catch(() => console.log('Ошибка'))
                    }
            }
}

Answer 1

Это абсолютно нормальное поведение. Когда Вы сообщаете что файл загружен на 100%, это лишь означает что сервер получил файл. Затем сервер должен его как-то обработать, сгенерировать ответ и послать его Вам. И только после этого Вам вы можете получить ответ от сервера. Как раз время между загрузкой файла на сервер и ответом сервера, Вы называете еще временем.

Если Вы хотите показывать прогресс от начала запроса до ответа от сервера, ограничьте максимальный прогресс ответа например 99 процентами, вот так:

this.progress = Math.min(Math.round(e.loaded * 100 / e.total), 99);

И в .then ставьте прогресс в 100. Или просто скрывайте прогресс.

БЛОГ НА HUSL

Индикатор загрузки файлов на сервер

Ответы (1 шт):