Задать вопрос
  • Как загружать большие файлы асинхронно с формы сайта на облачное хранилище s3?

    @vadik_nv Автор вопроса
    В общем решил проблему прямой отправкой на бакет, ещё сделал сеттер процентов прогрессбара через Vuex.
    Код отправки файла на бакет.
    let xhr = new XMLHttpRequest();
                    let self = this
    
                    xhr.upload.onprogress = function (event) {
                      if (event.lengthComputable) {
                        let percentComplete = (event.loaded / event.total) * 100;
                        self.$store.commit('SET_PERCENTAGE', {id: lessonId, percent: percentComplete})
                      }
                    };
    
                    xhr.upload.onload = function () {
                      self.$toast.success(`Видео ${fileName} успешно загружено`, {
                        position: 'top-right'
                      })
    
                      self.$store.commit('COMPLETE_UPLOADING', {id: lessonId})
                    }
    
                    xhr.upload.onerror = function () {
                      self.$toast.error(`Ошибка загрузки видео ${fileName}`, {
                        position: 'top-right'
                      })
    
                      self.$store.commit('COMPLETE_UPLOADING', {id: lessonId})
                    }
    
                    xhr.open('PUT', 'https://storage.yandexcloud.net/platfor-easy-code-bucket/' + this.selectedFileName, true)
    
                    xhr.send(this.file)
    
                    this.$modal.hide('edit-lesson')


    А так же сделал предупреждение, если пользователь пытается закрыть или обновить вкладку
    Мутации управления прогрессбаром во Vuex, возможно сразу несколько параллельных загрузок.
    PUSH_UPLOADING(state, filename) {
                state.uploadingFiles.push(filename)
                window.onbeforeunload = () => {
                    return false
                }
            },
            COMPLETE_UPLOADING(state, lesson) {
                state.uploadingFiles = state.uploadingFiles.filter(file => file.id !== lesson.id)
                if (state.uploadingFiles?.length) {
                    window.onbeforeunload = () => {
                        return true
                    }
                }
            },
            SET_PERCENTAGE(state, value) {
                let index = state.uploadingFiles.findIndex(i => i.id === value.id)
                state.uploadingFiles[index].percent = value.percent
            }
    Ответ написан
    Комментировать