vue.js上传图片时同时加载图片展示图片

原创于 2018-03-26 18:25:03 发布 · 3.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js上传图片的同时展示图片

vue 同时被 3 个专栏收录

3 篇文章

订阅专栏

web

3 篇文章

订阅专栏

jquery

2 篇文章

订阅专栏

本文介绍如何使用Vue.js结合vue-resource及axios实现文件选择后的实时预览功能，并展示了具体的代码实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//导入一下三个js即可
<input type = "file" name = "image" id = "image" src = "" />
<script src="assets/js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="assets/js/vue-resource.min.js" type="text/javascript" charset="utf-8"></script>
<script src="//cdn.bootcss.com/axios/0.15.3/axios.min.js"></script>
<script type="text/javascript">
            var vm = new Vue({
                el:".data-items",
                data:{
                    file:''
                },
                methods:{
                    //当选择选择文件时触发的方法
                    getFile: function(event) {
                        //将选择的文件放到当前vue中
                        this.file = event.target.files[0];
                        //获取选择的文件的url路径并放到指定的src下面
                        $("#image").prop("src",window.URL.createObjectURL(event.srcElement.files.item(0)))
                        console.log(this.file);
                    }
                }
            });
        </script>