@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
            ];
}


Буду признателен если поможете!
  • Вопрос задан
  • 444 просмотра
Пригласить эксперта
Ваш ответ на вопрос

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

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