将图像转换为base64时如何显示进度条？

Question

I upload an image, then the program show it: converting the uploaded image to base64 and put it in img src. What i'm trying to achieve is while waiting to large image convert to base64 display a progress bar.

I tried to show progress bar before converting, and then hide progress bar when finished.

<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
    },

The problem is that the progress bar is not showing, I don't why certainly. I think it's because I set to true loading var to show the progress bar but the program starts rapidly to convert the image and doesn't wait to the progress bar to actually show because the program got ocuppied in converting the image.

As Brad mentioned in the comment, is a good workaround to avoid converting to base64 since blob is faster. Thanks, Brad. Here's the code without converting to 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
    }

This workaround works, but still want to know a solution to the exposed problem.

Answer 1

Your guess is correct.

Try starting the conversion a bit later:

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