I'm experiencing some issues with my VueJS component that includes a file input and displays an image afterwards. Strangely, this is causing my web browsers (both Firefox and Chromium) to freeze up and use massive amounts of CPU. I tried switching to a simpler solution that doesn't utilize VueJS, using
document.getElementById('id').src = reader.resultexport 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)
})
}
}
}