How is the most simples way to convert input[type=file] into a string base64 in Vue (with javascript)?

Question

I want to generate a string base64 with a input type=file to persist just the string base64 so that became easier to manage images in database. Easier because i can work with only Json in this way.

I have something like this in my Vue server (using bootstrap-vue):

<template>
<div class="row">
    <!-- Send Image -->
  <div class="col-sm-8 ml-auto mr-auto">
    <b-form-file v-model="file" :state="Boolean(file)" placeholder="Escolha uma imagem..." accept="image/*"></b-form-file>
    <b-button v-on:clicl="submitFile()">Enviar</b-button>
  </div>
</div>
</template>

export default {
  name: 'imagem',
  data(){
    return{
      file: ''

    }
  },
  methods:{
      submitFile () {
          let stringBase64 = wantToConvertFile(this.file);
      }
  }
}

So how is the simple way to make sometring similar of "wantToConvertFile( )"?

Bootstrap-VUE - Form File Input

I believe that the best way is to use "vuex" – Sham Fiorin Nov 13 '18 at 19:14 — Sham Fiorin, Nov 13 '18 at 19:14

score 1 · Accepted Answer · answered Nov 12 '18 at 18:12

1

Answered here https://stackoverflow.com/a/36281449/6685348

Filereader api https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL note

The file's result results in a string that cannot be directly decoded as Base64. To retrieve only the Base64 encoded string, you must remove data:/;base64, from the string.

answered Nov 12 '18 at 18:12

artoju

1,612
12
12

with this solution https://stackoverflow.com/a/36281449/6685348, is not possible to set the result a varible in Vue – Sham Fiorin Nov 13 '18 at 19:18

How is the most simples way to convert input[type=file] into a string base64 in Vue (with javascript)?

1 Answers1