text QUploader组件的扩展使其能够上传文件抛出Firebase存储

Posted 2021-04-29

import { QUploaderBase } from 'quasar'

export default {
  props: ['refStorage'],
  name: 'FirebaseUploader',
  data () {
    return {
      uploading: '',
      uploadTask: {}
    }
  },

  mixins: [QUploaderBase],

  computed: {
    isIdle() {
      return !this.uploading
    },

    isUploading() {
      return this.uploading
    }
  },

  methods: {
    abort() {
      if (!this.disable && this.isUploading) {
        this.uploadTask.cancel()
        this.uploading = false
      }
    },

    upload() {
      if (this.disable || !this.queuedFiles.length) {
        return
      }

      const queue = this.queuedFiles.slice(0)
      this.queuedFiles = []

      queue.forEach(file => {
        this.uploadFile(file)
      })
    },
    
    uploadFile(file) {
      const ref = this.refStorage
      this.uploadTask = ref.child(file.name).put(file)
      
      this.uploadTask.on(
        'state_changed',
        snapshot => {
          this.uploading = true
          this.uploadSize = snapshot.totalBytes
          this.uploadedSize = snapshot.bytesTransferred
        },
        error => {},
        () => {
          this.uploadTask.snapshot.ref.getDownloadURL().then(downloadURL => {
            this.uploading = false
            this.$emit('uploaded', downloadURL)
          })
        }
      )
    }
  }
}

<template>
  <q-uploader-firebase :ref-storage="refStorage" @uploaded="setImage" />
</template>

<script>

import QUploaderFirebase from '...'
export default {
  components: {
    QUploaderFirebase
  },
  data() {
    return {
      refStorage: firebase.storage.ref('images')
    } 
  },
  methods: {
    setImage(downloadURL) {
      // ...
    }
  }
}