vue获取input框中的files属性

Question

如何使用vue获取inputtype类型是file的files属性

<input type="file">
<input type="text" v-model="scr">
<input type="button" @click="btn" value="提交">
    <script>
        new Vue({
            el:"body",
            methods:{
                btn：function(){
                    console.log(this.scr)//这样可以获取相应的value的值
                }
            },
            data:{
                scr:""
            }
        })
    </script>

我怎样象获取input中value的值来获取files属性呢
求指教

Answer 1

<input type="file" ref="file">
<button @click="getFile">获取文件</button>

 methods: {
    getFile() {
      console.log(this.$refs.file.files)
    },
}

Answer 2

不能用文本框获取 value 的方式获取文件信息

<input type="file" @change="getFile">

methods: {
  getFile (e) {
    var files = e.target.files
  }
}

Answer 3

<input type="file" id="file">
<input type="button" @click="btn" value="提交">

 new Vue({
            el:"body",
            methods:{
                btn：function(){
                    console.log(document.getElementById('file').files);
                }
            },
            data:{
                scr:""
            }
        })

Answer 4

要想获取文件属性，得上传文件，上传文件里能看到file的属性，比如这样：

  <input type="file"  multiple="multiple"  v-on:change="uploadFile($event)" >上传

在method里调用这个uploadFile方法，打印$event.target.files就能看到文件的属性了，包含文件大小种类等属性