Encode file to base64 in v-file-input vuejs and vuetify

Question

vuetify:

 <v-file-input 
     multiple 
     label="Angebotsdokumente" 
     v-model="orderattachment">
</v-file-input>

How can I encode the file to base64?

Well, I do not know what variable contains my file object. `orderattachment` contains: `lastModified: 1575018339000 name: "boarding-pass.pdf" size: 192624 type: "application/pdf" webkitRelativePath: ""` So is this the variable I need to convert? — farahm, Feb 05 '20 at 14:19
The return type from the Change event for v-file-input is File[] - which is just an array of File objects. You can see this in the documentation by selecting Events in the API section and looking for the Change event: https://vuetifyjs.com/en/components/file-inputs. So in short, yes, that's what you'd need to convert. — Tanner, Feb 05 '20 at 14:30

score 1 · Answer 1 · answered Dec 23 '21 at 19:42

Easy.

Put a watch on your v-model object "orderattachment"
Run FileReader() on it and output the base64

watch: {
    orderattachment(value) {
      console.log("value", value)
      let fr = new FileReader()
      fr.addEventListener("load", function (e) {
        //this is your base64
        console.log(e.target.result)
      });
      fr.readAsDataURL(value)
    }
  },

Encode file to base64 in v-file-input vuejs and vuetify

1 Answers1