I hope this will help:
<template>
<div>
<div class="form-group">
<label class="col-md-3 control-label">Picture</label>
<div class="col-md-6">
<input type="file" class="form-control" @change="fileSelected">
<div v-if="image">
<img :src="image" width="300px" class="img">
<button type="button" class="btn btn-danger" @click="removeImage"><i class="fa fa-fw fa-trash"></i></button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
image: '',
};
},
methods: {
fileSelected: function(e) {
let files = e.target.files || e.dataTransfer.files;
if (!files.length) {
return;
}
this.createImage(files[0]);
},
createImage(file) {
let image = new Image();
let reader = new FileReader();
reader.onload = (e) => {
this.image = e.target.result;
};
reader.readAsDataURL(file);
},
removeImage: function (e) {
this.image = '';
},
},
}
</script>`
this.image is the file base64 encoded. This can be either saved to the database or to a real file with PHP.