本章节讲解一下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