html部分:
<input type="file" id="img" @change="uploadImg" />//上传文件
<img :src="imgUrl" />//显示图片
js部分:
new Vue({
el: '#app',
data() {
return {
imgUrl: ''
}
},
methods: {
uploadImg: function(e) {
var file = e.target.files[0];
if(!/image/\w+/.test(file.type)) {
alert("请确保文件为图像类型");
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file);
var that = this
reader.onload = function(e) {
that.imgUrl = e.target.result
}
},
}
})