屏幕快照 2018-09-09 08.09.26.png
<a class="db pr con bgw">
頭像
<span class="r set-head" @click.stop="uploadHeadImg">
<img class="set-head-icon" :src="avatar" style="width: 40px;height: 40px;">
</span>
<input type="file" accept="image/*" @change="handleFile" class="hiddenInput dn"/>
</a>
style
.set-head {
position: relative;
top: .7em;
}
.set-head-icon {
width: 2em;
border-radius: 50%;
}
.dn {
display: none;
}
-
如不設(shè)置display:none,就會(huì)是如下效果
屏幕快照 2018-09-09 08.31.05.png - input標(biāo)簽的accept屬性
<input type="file" name="header_img" accept="image/gif,image/jpeg,image/png,image/jpg">
data(){
return {
avatar:''
}
},
watch: {
avatar() {
this.$http.get('api/set', {params: {"avatar": this.avatar}}).then(res => {
let j = res.data;
if (j.code == 200) {
this.avatar = j.data.avatar;
}
})
}
},
mounted() {
require('./jquery.min');
},
// 打開(kāi)圖片上傳
uploadHeadImg: function () {
this.$el.querySelector('.hiddenInput').click()
},
// 將頭像顯示
handleFile: function (e) {
let $target = e.target || e.srcElement;
let file = $target.files[0];
let param = new FormData(); //創(chuàng)建form對(duì)象
param.append('file', file, file.name);//通過(guò)append向form對(duì)象添加數(shù)據(jù)
param.append('chunk', '0');//添加form表單中其他數(shù)據(jù)
let config = {
headers: {'Content-Type': 'multipart/form-data'}
}; //添加請(qǐng)求頭
this.$http.post("api/upload", param, config).then(res => {
var j = res.data;
if (j.code === 200) {
this.avatar = j.data[0];
this.$tip("頭像上傳成功弥奸！");
}
})
}
