来自服务的组件内部的 VueJS Axios onUploadProgress

Question

我正在尝试在 vuejs 中创建一个进度条...但是，所有教程都是在组件内部直接调用 axios...我的设置有点...不同 :)

我组件里就是这个上传方式

uploadPhotos() {
      const formData = new FormData();

      this.gallery_photos.forEach(photo => {
        formData.append(`photo_${photo.name}`, photo);
      });

      PhotoService.uploadPhotos(this.gallery.id_gallery, formData, callback => {
        console.log(callback);
      })
        .then(() => {
            console.log("OK");
        })
        .catch(error => {
            console.log(error);
        });
    }

这是我的服务

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

但是，我从这两个方面都没有得到输入……我错过了什么？ :(

其他一切正常...我正在服务器端获取文件，以便我可以正确处理它们。我只是不知道 onUploadProgress 没有做任何事情

Answer 1

可能需要将 headers 合并到 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);
}

Answer 2

您需要在函数中添加回调参数并触发它：

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
  );
}

现在您将看到您的数据：

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

来自服务的组件内部的 VueJS Axios onUploadProgress

VueJS Axios onUploadProgress inside the component from service

vue.js

axios