将图像转换为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);
},