Блог

Я использую текущие версии Laravel amp; Inertia.js . Я также использую IntertiaProgress и собираюсь использовать его во время загрузки файла с помощью axios

Все файлы загружаются нормально, но консоль показывает:

 app.js:33316 Uncaught (in promise) TypeError: Cannot read property 'defaultPrevented' of undefined
  

Отслеживание этого обратно указывает на здесь, в источнике InertiaProgress :

  start(event) {
    Promise.resolve().then(() => {
      if (event.defaultPrevented) {
        return
      }

      this.inProgress  
      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        Nprogress.set(0)
        Nprogress.start()
      }, this.delay)
    })
  },
  

Если console.log(event) я получу undefined

Мой upload() метод:

 upload(files) {
    let url = this.$route('library.upload');
    this.$root.showLoading = true;

    const uploadConfig = {
        timeout: 10000,
        onUploadProgress: function(progressEvent) {
            let percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total)
            InertiaProgress.progress(percentCompleted)
        }
    }

    InertiaProgress.start()

    axios.post(url, {
        files,
    },
        uploadConfig
    ).then(res => {
        let files = res.data.files
        if (files.length) {
            this.filesList = cloneDeep(files)
        }

        this.newFiles = []

        InertiaProgress.finish()
        this.$root.showLoading = false
    }).catch(err => {
        console.log(err)

        InertiaProgress.finish()
        this.$root.showLoading = false
    })
},
  

Любая помощь приветствуется

Вы могли бы использовать NProgress напрямую.

Вместо:

InertiaProgress.progress(percentCompleted)

Вот так:

NProgress.progress(percentCompleted)

Смотрите также: https://inertiajs.com/progress-indicators