@NikSIk31

AWS s3 реальный progress bar загрузки файла upload, как сделать?

Здравствуйте! Хочу сделать прогресс бар загружая на AWS s3 используя AJAX (axios) и laravel методы в роутах. У меня есть функция onUploadProgress в axios, но она показывает не весь ход загрузки, а именно локалькую какую-то (или что-т одругое, не знаю как назвать. Мб без обработки только загрузка. - не важно), суть в том, что она доходит до 100%, но ответ приходит через пару секунд после этого.
Подскажите пожалуйста как можно сделать.
Для простоты понимая я сделал тестовый код , вот он:
HTML форма:
<form  action="{{ route('task.store') }}" method="POST" enctype="multipart/form-data" class="form">
        <input type="file" name="files[]" id="files" multiple required>

        <input type="submit" id="btn">
    </form>

JavaScript:
var btn = document.getElementById('btn');
var form = document.querySelector('.form');



form.addEventListener('submit', function(e){
    e.preventDefault();

    var file = document.querySelector('#files').files[0];

    var data = new FormData();
        data.append('test', file);


    var settings = { 
        headers: { 'Content-Type': 'multipart/form-data' },
        onUploadProgress: function (progressEvent) {
            let percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
            console.log(percentCompleted);
        }
    };

    axios.post(this.action, data, settings)
        .then(response => {
            console.log(response);
        })
        .catch(response => {
            console.log(response)
        });

});

Роут на сервер (тот, который в action в форме):
public function store(Request $request) {
            $path = 'folder';

            $s3_path = $request->test->store($path, 's3');

            return [
                'path' => $s3_path
            ];
}


Буду признателен если поможете!
  • Вопрос задан
  • 240 просмотров
Решения вопроса 1
@Telmil
Самый "простой" и очевидный ответ - это использование сокетов и/или периодических ajax-вызовов.

Опишу один из вариантов (не знаю зачем вам такой функционал, но может после понимания некой костыльности, вы остановитесь и решите все таки загрузку на s3 оставить в фоне и не уведомлять "фронт" об этом):
На стороне php при загрузке используете progress (https://docs.aws.amazon.com/sdk-for-php/v3/develop... - ищите на странице progress)
В обработчике, пишите в редис информацию, далее на стороне фронта дергаете роут раз в какое-то время и получаете статус из редиса (отдачу данных можете сделать через nginx, просто забираете данные из редис по ключу и отдаете в ответ)

Но опять же повторюсь, я (если честно), никакого смысла в этом не вижу, гораздо проще сохранять файл на серваке, отдать ответ клиенту и затем загружать его в s3 фоном, в случае если загрузка не завершилась успехом - уведомляете об этом пользователя (выводите где-нибудь список не загруженных файлов с ошибкой и просите загрузить повторно)
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы