vue获取input框中的files属性

anRui
  • 99

如何使用vue获取inputtype类型是filefiles属性

<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属性呢
求指教

回复
阅读 18.6k
4 个回答
✓ 已被采纳
<input type="file" ref="file">
<button @click="getFile">获取文件</button>
 methods: {
    getFile() {
      console.log(this.$refs.file.files)
    },
}

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

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

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

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

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

methods: {
  getFile (e) {
    var files = e.target.files
  }
}
<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:""
            }
        })
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏