欢迎光临
我们一直在努力

vue.js如何实现图片上传

本章节讲解一下vue.js如何实现图片上传的功能

本demo不对上传控件进行美化,如果需要我可以单独写一篇文章写一下如何美化上传按钮

本例子在文章最后可下载

直接贴代码

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
    <div id='app'>
        <img :src="imageUrl" style="width:200px;" />
        <br />
        <input type="file" accept="image/gif,image/jpeg,image/jpg,image/png" @change="imageSelect($event)" />
    </div>
</body>
</html>
<script>

    var vue = new Vue({
        el: '#app',
        data: {
            imageUrl:""
        },
        methods: {
            //图片选中后的事件
            imageSelect: function (e) {
                console.log(e);
                var file = e.target.files[0]
                var reader = new FileReader()
                var that = this
                if (file.size / 1024 > 200) {
                    layer.open({
                        title: '提示',
                        content: '上传图片的大小不能大于200K,请用photoshop等软件压缩一下图片'
                    });
                    return;
                }
                if (file.type.indexOf("gif") == -1 &&
                    file.type.indexOf("jpeg") == -1 &&
                    file.type.indexOf("jpg") == -1 &&
                    file.type.indexOf("png") == -1 &&
                    file.type.indexOf("bmp") == -1
                    ) {
                    layer.open({
                        title: '提示',
                        content: '图片格式不正确,请重新选择图片'
                    });
                    return;
                }
                reader.readAsDataURL(file)
                reader.onload = function (e) {
                    console.log("file name", file.name);
                    console.log("file type", file.type);
                    console.log("this.result", this.result)
                    that.imageUrl = this.result
                }
            }

        }

    });


</script>

demo下载地址  链接: https://pan.baidu.com/s/1TrlYxAygV7cYwg-y6XFBFg 提取码: rrtp

 

赞(0)
未经允许不得转载:自游互动 » vue.js如何实现图片上传
分享到: 更多 (0)

自由技术,自由自在

项目合作联系我们