В общем решил проблему прямой отправкой на бакет, ещё сделал сеттер процентов прогрессбара через 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
}