CODEWITHSUNDEEP
filevue.jsinputbase64
Sham Fiorin
Sham Fiorin

Reputation: 539

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

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

Upvotes: 0

Views: 5232

Answers (1)

artoju
artoju

Reputation: 1712

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.

Upvotes: 1

Related Questions