<div id="avatarimg">
<img :src="avatar"/>
<input @change="upavatarimg" type="file" name="" id="" value="图片上传预览" />
<div id="warning"></div>
</div>
export default {
name: 'avatarimg',
data() {
return {
avatar:"",
imgType: {
type: 'image/gif, image/jpeg, image/png, image/jpg',
}, //图片格式
}
},
methods: {
upavatarimg: function(e) {
var _this=this
var avatarImg = e.target.files[0]
var avatarImgsize = avatarImg.size
var avatarImgtype = avatarImg.type
//验证图片格式
if(this.imgType.type.indexOf(avatarImgtype) == -1) {
document.getElementById("warning").innerHTML = "请选择正确的图片格式"
return false;
} else if(avatarImgsize > 5242880) { //验证图片大小 5M
document.getElementById("warning").innerHTML = "图片大小不能超过5M"
return false;
} else {
document.getElementById("warning").innerHTML = ""
var avatarData = new FormData();
avatarData.append('files', avatarImg); //图片
//向后台发送请求 提示:axios 需要安装插件
_this.axios({
method: 'post',
url: '接口',
data: "",//data里面填入图片资源 avatarData,注意传值方式由后台定义
}).then(function(res) {
console.log(res.data)
_this.avatar="请求返回来的图片路径"
}).catch(function(err) {
console.log(err)
})
}
}
},
components: {
},
mounted: function() {
}
}