// https://jsfiddle.net/mani04/5zyozvx8/
new Vue({
el: '#app',
template: `
<div>
<div class="file-upload-form">
Upload an image file:
<input type="file" @change="previewImage" accept="image/*">
</div>
<div class="image-preview" v-if="imageData.length > 0">
<img class="preview" :src="imageData">
</div>
</div>
`,
data: {
imageData: "" // we will store base64 format of image in this string
},
methods: {
previewImage: function(event) {
// Reference to the DOM input element
var input = event.target;
// Ensure that you have a file before attempting to read it
if (input.files && input.files[0]) {
// create a new FileReader to read this image and convert to base64 format
var reader = new FileReader();
// Define a callback function to run, when FileReader finishes its job
reader.onload = (e) => {
// Note: arrow function used here, so that "this.imageData" refers to the imageData of Vue component
// Read image as base64 and set to imageData
this.imageData = e.target.result;
}
// Start the reader job - read file as a data url (base64 format)
reader.readAsDataURL(input.files[0]);
}
}
}
});
Created
December 8, 2017 20:12
-
-
Save zmts/9cfdba90897db1615b6e9fda6069a124 to your computer and use it in GitHub Desktop.
Vue.js Preview image file
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment