Question

我有以下最小的VueJS组件，该组件提供文件输入并随后显示图像。由于某些原因，这会杀死我的网络浏览器（已通过Firefox和Chromium测试）。这里的“杀手”意味着他们不再响应，CPU变得疯狂。我切换到使用document.getElementById('id').src = reader.result的解决方案使用较少的VueJS，该解决方案也仅需要方法，但是Firefox仍然无法正常工作。有什么想法吗？

export default {
  name: 'test',

  template:
    '<div>' +
    '<img src="image" v-if="image">' +
    '<input type="file" @change="fileChange" />' +
    '</div>',

  data() {
    return {
      image: ''
    }
  },

  methods: {
    async fileChange(e) {
      const file = e.target.files[0]

      if (file) {
        this.image = await this.loadImage(file)
        console.log('Image is: ' + this.image)
      }
    },

    async loadImage(file) {
      return new Promise(resolve => {
        const reader = new FileReader()

        reader.onloadend = function() {
          resolve(reader.result)
        }

        reader.readAsDataURL(file)
      })
    }
  }
}

Answer 1

似乎从未调用过Content-ID，而且由于使用了异步和等待reader.onloadend方法也从未结束，这会导致浏览器停止响应。

要查看问题所在，还应设置fileChange，如下所示：

FileReader.onerror

VueJS-显示输入图像杀死浏览器

1 个答案: