javascript - 如何在Vue数据中存储FileList对象

Question

你好，我试图在 vue 数据对象中存储 FileList 对象，但它被存储为字符串“File”

我像这样向 html 添加引用

<input type="file" @change="fileChange($event.target)">

在 JavaScript 中

new Vue({
   el: '#someEl',
   data: {
      file: null
   },
   methods: {
      fileChange (file) {
        this.file = file.files[0]
      }
   }
})

结果我得到了这个:

Answer 1

您只需将参数 $event 传递给 fileChange()，而不是 $event.target。
现在，您可以使用 fileChange() 函数内的 evt.target.files[0]; 访问文件对象。

var vm = new Vue({
    el: '#app',
    data: {
      file: {}
   },
   methods: {
      fileChange (evt) {
        this.file = evt.target.files[0];
        console.log('file Object:==>',this.file);
      }
   }
    
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js" type="text/javascript"></script>

<div id="app">				

  
  <p>
   <input type="file" @change="fileChange($event)">
   name: <b>{{file.name}}</b>
  </p>
  <p>
    size: <b>{{file.size}} </b> 
    & type: <b>{{file.type}}</b>
  </p>
</div>