javascript – Convert image to base64 using VueJS?


I have an <input type="file /> in VueJS and when I select an image I want it converted to base64 as I will save the images in the database only in base64 . What would be the method to get only the base64 String that gives rise the image?

<input @change="uploadImage" type="file" name="photo" accept="image/*">
<img :src="imageSrc" class="image">

uploadImage: function (e) {
  var files =
  if (!files[0]) {
  var data = new FormData()
  data.append('media', files[0])
  var reader = new FileReader()
  reader.onload = (e) => {
    this.imageSrc =


Get the new Vue instance by the vm variable, to access the imageSrc , then in the uploadImage method, use FileReader to load and display the image directly in the <img> tag. Example:

Vue.config.debug = false;
Vue.config.devtools = false;
Vue.config.silent = true;

var vm = new Vue({
  el: '#editor',
  data: {
    imageSrc: null
  methods: {
    uploadImage: function() {    
      var file = document
      var reader = new FileReader();
      reader.onload = function(e) {
        vm.imageSrc =             
      reader.onerror = function(error) {
<script src=""></script>

<div id="editor">
   <input @change="uploadImage" type="file" name="photo" accept="image/*">
  <img :src="imageSrc" class="image">  


Scroll to Top