將圖像轉換為base64時如何顯示進度條？

Question

我上傳一個圖像，然后程序顯示它：將上傳的圖像轉換為base64並將其放入img src中。 我想要實現的是在等待大圖像轉換為base64時顯示進度條。

我嘗試在轉換之前顯示進度條，然后在完成后隱藏進度條。

<div>
   <v-avatar v-if="editedItem.image" class="mt-3" :tile="true" :size="250" color="grey lighten-4"><img :src="editedItem.image" alt="avatar"></v-avatar>
   <input id="image" type="file" accept="image/*" multiple="false" ref="imageUpload" v-show="false" @change="setImage()" />
   <v-text-field class="centered-input" v-model="editedItem.imageStatus" name="image" :rules="imageRules" readonly v-show="!seeingItem"></v-text-field>
   <v-btn outline block color="black" @click.native="imageUpload()" v-show="!seeingItem">{{ imageButtonText }}</v-btn>
</div>

    imageUpload () {
      this.$refs.imageUpload.click() // Launch file dialog
    },

    setImage () {
      this.loading = true // Init progress bar

      let image = document.getElementById('image') // Get image

      if (image.files && image.files[0]) { // Check if image and start converting
        var fileReader = new FileReader()

        fileReader.addEventListener('load', e => {
          this.editedItem.image = e.target.result
        })

        fileReader.readAsDataURL(image.files[0])

        this.editedItem.imageStatus = 'Imagen Cargada'
        this.imageButtonText = 'Cambiar Imagen'
      } // Finished converting

      this.loading = false // Hide progress bar
    },

問題是進度條沒有顯示，我不知道為什么。 我認為這是因為我設置為true loading var以顯示進度條，但是該程序開始快速轉換圖像，而沒有等到進度條實際顯示，因為該程序在轉換圖像時被占用。

正如布拉德（Brad）在評論中提到的那樣，這是避免轉換為base64的好方法，因為blob更快。 謝謝，布拉德。 這是不轉換為base64的代碼：

<div>
   <v-avatar v-if="editedItem.image" class="mt-3" :tile="true" :size="250" color="grey lighten-4"><img :src="editedItem.image" alt="avatar"></v-avatar>
   <input id="image" type="file" accept="image/*" multiple="false" ref="imageUpload" v-show="false" @change="setImage($event)" />
   <v-text-field class="centered-input" v-model="editedItem.imageStatus" name="image" :rules="imageRules" readonly v-show="!seeingItem"></v-text-field>
   <v-btn outline block color="black" @click.native="imageUpload()" v-show="!seeingItem">{{ imageButtonText }}</v-btn>
</div>

    imageUpload () {
      this.$refs.imageUpload.click() // Launch file dialog
    },

    setImage (event) {
      let image = document.getElementById('image') // Get image

      if (image.files && image.files[0]) { // Check if image
        this.editedItem.image = URL.createObjectURL(event.target.files[0]) // Get blob

        this.editedItem.imageStatus = 'Imagen Cargada'
        this.imageButtonText = 'Cambiar Imagen'
      } // Finished converting
    }

此解決方法有效，但仍想知道所暴露問題的解決方案。

Answer 1

你的猜測是正確的。

稍后嘗試啟動轉換：

setImage() {
    this.loading = true // Init progress bar
    const _this = this;
    setTimeout(() => {

        let image = document.getElementById('image') // Get image

        if (image.files && image.files[0]) { // Check if image and start converting
            var fileReader = new FileReader()

            fileReader.addEventListener('load', e => {
                this.editedItem.image = e.target.result
            })

            fileReader.readAsDataURL(image.files[0])

            _this.editedItem.imageStatus = 'Imagen Cargada'
            _this.imageButtonText = 'Cambiar Imagen'
        } // Finished converting

        _this.loading = false // Hide progress bar
    }, 100);
},