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

Question

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

我向html这样添加引用

tableView.backgroundColor = UIColor(red: 24/255.0, green: 34/255.0, blue: 41/255.0, alpha: 100)
tableView.separatorColor = UIColor(red: 24/255.0, green: 34/255.0, blue: 41/255.0, alpha: 100)

在javascript中

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

结果我得到了这个：

Answer 1

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

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>