I'm trying to use the v-file-input component to upload an image to an s3 bucket but when I try to get the photo it comes up as an empty object

<v-file-input
    v-model='test'
    type='file'
></v-file-input> 

When I call 'this.test' as the file to upload it shows up as an empty file though doing 'this.test.name' shows the name of the file... I'm sure this is something super simple and I'm overthinking it hard, I've tried reading the file with 'FileReader' with readAsDataUrl but that just reads it as a base64, I've also tried FormData to no avail

CodePudding user response：

I think you're doing something else wrong. Here is a super simple snippet, the file object is definitely not empty:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    file: null,
    imageUrl: null
  }),

  methods: {
    upload() {
      // the file object is not empty
      console.log(this.file);
      
      // post file to server
      const formData = new FormData();
      formData.append('file', this.file);

      const options = {
        method: 'POST',
        body: formData,
      };

      fetch('https://httpbin.org/post', options).then(response => response.json())
        .then(data => console.log(data));
    }
  }
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">

<div id="app">
  <v-app id="inspire">
    <v-file-input v-model='file' accept="image/*" @change="upload"></v-file-input>
  </v-app>
</div>



<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>