vue获取input框中的files属性

如何使用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属性呢
求指教

阅读 15.7k
评论
    4 个回答
    • 500
    <input type="file" ref="file">
    <button @click="getFile">获取文件</button>
     methods: {
        getFile() {
          console.log(this.$refs.file.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:""
                    }
                })

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

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

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

            撰写回答

            登录后参与交流、获取后续更新提醒

            相似问题
            推荐文章