使用 vuetifyjs v-file-input 进行图片上传

Question

我正在尝试使用 v-file-input 组件将图像上传到 s3 存储桶，但是当我尝试获取照片时，它显示为空对象

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

当我调用 'this.test' 作为要上传的文件时，它显示为一个空文件，尽管 'this.test.name' 显示了文件的名称...我确信这非常简单而且我想得太多了，我尝试使用 'FileReader' 和 readAsDataUrl 读取文件，但它只是将其读取为 base64，我也尝试过 FormData 无济于事

Answer 1

我认为你做错了什么。这是一个超级简单的片段，file 对象绝对不为空：

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/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/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/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

使用 vuetifyjs v-file-input 进行图片上传

Using vuetifyjs v-file-input for image upload

vue.js

vuetify.js