@Scorpiored88

Как получить доступ к статусу выгрузки файла в Vue.js + axios, с другого компонента?

Есть у меня сервис компонент для работы с api (ApiManager.js), в нем есть метод для выгрузки файлов:
uploadImage(imagFormData) {
    return axios.post('https://apiurl/image', imagFormData, {
      headers: {
        "Authorization": "Client-ID"
      },
      onUploadProgress: uploadedEvent => {
        console.log('Upload proccess -> ', Math.round(uploadedEvent.loaded / uploadedEvent.total * 100) , '%' )
      }
    })
      .then(response => {
        console.log('uploaded resp ---> ', response);
      })
  }


И есть компонент UploadImageComponent.vue в котором вызывается этот метод:
import ApiManager from '@/services/ApiManager'

ApiManager.uploadImage(imagFormData).then(response =>{
   ...
})


Как с такой архитектурой в компоненте UploadImageComponent.vue получить доступ к статусу выгрузки?
  • Вопрос задан
  • 406 просмотров
Решения вопроса 1
potapchino
@potapchino
onUploadProgress({loaded, total}) {
  const uploadProgress = Math.round(loaded / total * 100)
  
  store.commit('uploader/setProgress', uploadProgress)
}


export const uploader = {
  namespaced: true,
  state: {
    progress: 0
  },
  mutations: {
    setProgress(state, progress) {
      state.progress = progress
    }
  }
}


computed: {
  ...mapState('uploader', [
    'progress'
  ])
}


<template>
  <div>{{progress}}%</div>
</template>
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
Комментировать
Ваш ответ на вопрос

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

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