File upload in Base64 format

[Aroxed]

Hi. Could you suggest how to send file as a json in base64 format?

[marssantoso]

The trick is to use the FileReader API. Here's a snippet I've used:

<template>
  <file-upload
    ref="upload"
    v-model="files"
    extensions="jpg,jpeg,png,webp"
    accept="image/png,image/jpeg,image/webp"
    :multiple=false
    :size="1024 * 1024 * 5"
    @input-file="inputFile"
  >
</template>

export default {
  data: () => {
    return {
      files: [],
      base64: ""
    }
  },
  methods: {
    inputFile() {
      const file = this.files[0] && this.files[0].file;
      function readFile(file, cb) {
        let FR = new FileReader();
        FR.readAsDataURL(file);
        FR.onloadend = () => {
          cb(FR.result);
        };
      }
      if (file) {
        readFile(file, cb => {
          this.base64 = cb;
        });
      }
    }
  }
}

The base64 of the image should be accessible in this.base64