自游互动本章节讲解一下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