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
– farahm, Commented Feb 5, 2020 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: vuetifyjs.com/en/components/file-inputs. So in short, yes, that's what you'd need to convert. — Tanner
– Tanner, Commented Feb 5, 2020 at 14:30

Alan Spurlock · Accepted Answer · 2021-12-23 19:42:47Z

1

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)
    }
  },

answered Dec 23, 2021 at 19:42

Alan Spurlock

3432 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related