vue点击按钮上传图片_vue.js如何实现图片上传

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

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

本例子在文章最后可下载

直接贴代码

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

}

}

}

});

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