在第三方js库中如何使用rails active_storage获得上传进度

Question

rails文件直传说明

Direct Uploads教程

我的用法

import { DirectUpload } from 'activestorage'

uploadFile (file) {
        // activestorage: direct_upload
        let vm = this
        const url = '/rails/active_storage/direct_uploads'
        const upload = new DirectUpload(file, url, upload)

        return new Promise((resolve, reject) => {
          upload.create((error, blob) => {
            if (error) {
              console.log(error)
              vm.$Message.error(error)
            } else {
              // Add an appropriately-named hidden input to the form with a value of blob.signed_id
              console.log(blob)
              resolve(blob.signed_id)
            }
          })
        })
      }

需求

希望加上上传进度提示，因此需要获取上传进度

问题

教程示例为：

import { DirectUpload } from "activestorage"
 
class Uploader {
  constructor(file, url) {
    this.upload = new DirectUpload(this.file, this.url, this)
  }
 
  upload(file) {
    this.upload.create((error, blob) => {
      if (error) {
        // Handle the error
      } else {
        // Add an appropriately-named hidden input to the form
        // with a value of blob.signed_id
      }
    })
  }
 
  directUploadWillStoreFileWithXHR(request) {
    request.upload.addEventListener("progress",
      event => this.directUploadDidProgress(event))
  }
 
  directUploadDidProgress(event) {
    // Use event.loaded and event.total to update the progress bar
  }
}

源码：https://github.com/rails/rail...

DirectUpload的实例不是应该能访问directUploadWillStoreFileWithXHR, directUploadDidProgress方法吗，但是我这么调用会报错没有该方法，求搭救

Answer 1

I finally get that we need to write the Uploader class half by ourselves.

uploader.js

import { DirectUpload } from "activestorage"

export default class Uploader {
  constructor(file, url, vm) {
    this.file = file
    this.url = url
    this.vm = vm
    this.directUpload = new DirectUpload(this.file, this.url, this)
  }
 
  upload() {
    return new Promise((resolve, reject) => {
      this.directUpload.create((error, blob) => {
        if (error) {
          // Handle the error
          reject(error)
        } else {
          // Add an appropriately-named hidden input to the form
          // with a value of blob.signed_id
          resolve(blob)
        }
      })
    })
  }
 
  directUploadWillStoreFileWithXHR(xhr) {
    xhr.upload.addEventListener("progress",
      event => this.directUploadDidProgress(event))
  }
 
  directUploadDidProgress(event) {
    // Use event.loaded and event.total to update the progress bar
    let percent = ((event.loaded / event.total) * 100).toFixed(1)
    console.log(percent)
    // 更新全局进度条(iview)
    this.vm.$Loading.update(percent)
  }
}

use like:

import Uploader from 'path/to/uploader.js'

const uploader = new Uploader(this.file, '/rails/active_storage/direct_uploads', this)

uploader.upload().then(blob => {
    // to do your request
    ...
}, error => {
    // report the error
    vm.$Message.error(error)
    vm.$Loading.error()
})

I have another confuse, how can I get the progress data when I use Uploader class?

相关issue:
https://github.com/rails/rail...