прогресс загрузки с Vue.js и Laravel

Question

Я следовал учебному пособию по Максимилиану https://www.youtube.com/watch?v=VqnJwh6E9ak, чтобы загружать свои файлы на S3. Я загружаю разные большие файлы размером до 250 МБ. Бэкэнд, написанный на laravel, работает нормально и загружает файл на S3, фронт также работает в порядке и отображает сообщение об успехе / неудаче, возвращенное Laravel, но моя проблема в том, что если я загружаю файл размером 100 МБ, процесс загрузки должен быть синхронизирован и отображать фактический процент загруженного файла. но этого не происходит, и я вижу 30% -> 60% -> 100% в течение секунды

Ниже приведен мой код Vue.js

<script>

export default {
    mounted() {
        console.log('mounted');
        let url = $(location).attr('href');
        let segments = url.split('/');
        this.podcastId = segments[5];

        axios.get(`/api/podcast/${this.podcastId}`).then(response => {
            let podcast = response.data.podcast;
            this.podcast_name = podcast.name;
        });
    },
    data() {
        return {
            podcast_name: '',
            episode_title: '',
            description: '',
            short_summary: '',
            keywords: '',
            selected_file: null,
            uploadPercentage: 0,
            uploading: false,
            podcastId: ''
        }
    },
    methods: {
        toggleSection(podcast_type) {
            if (podcast_type === '2') {
                this.showHosted = false;
                this.showRss = true;
            } else if (podcast_type === '1') {
                this.showRss = false;
                this.showHosted = true;
            }
        },
        onFileChanged(event) {
            this.selected_file = event.target.files[0];
        },
        onSubmit() {
            const formData = new FormData();
            formData.append('title', this.episode_title);
            formData.append('description', this.description);
            formData.append('keywords', this.keywords);
            formData.append('summary', this.short_summary);
            formData.append('audio', this.selected_file);
            this.uploading = true;
            axios.post(`/podcaster/podcast/${this.podcastId}/add-episode`, formData, {
                onUploadProgress: uploadEvent => {
                    this.uploadPercentage = parseInt(uploadEvent.loaded * 100 / uploadEvent.total);
                    console.log(this.uploadPercentage);
                }
            }).then(response => {

                this.uploading = false;
                let status = response.data.status;
                let message = response.data.message;
                let url = response.data.url;

                swal({
                    title: "",
                    text: message,
                    type: status,
                });

                /*if (status === 'success') {
                    window.setTimeout(function () {
                        window.location.href = url;
                    }, 5000);
                }*/


            });

        }
    },
}