[Vuejs]-VueJS Axios onUploadProgress inside the component from service

by

2👍

✅

Might need to combine the headers into the config

uploadPhotos(id, photos) {
  const config = {
    onUploadProgress: function (progressEvent) {
      const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
      console.log(percentCompleted);
    },
    headers: authHeader()
  };
  return axios.post(`galleries/${id}/photos`, photos, config);
}
👤Guido Faecke

1👍

You need to add a callback parameter to your function and trigger it:

uploadPhotos(id, photos, cb) {
  const config = {
    onUploadProgress: function (progressEvent) {
      const percentCompleted = Math.round(
        (progressEvent.loaded * 100) / progressEvent.total
      );
      cb(percentCompleted); // <== you can pass here whatever you want
    },
  };
  return axios.post(
    `galleries/${id}/photos`,
    photos,
    { headers: authHeader() },
    config
  );
}

Now you will see your data:

  PhotoService.uploadPhotos(this.gallery.id_gallery, formData, percent => {
    console.log(percent);
  })
👤bill.gates

Leave a comment