vue上传图片功能

HTML：

<div @click.stop="uploadHeadImg" class="headImg-box">

<img :src="nameRes.member_avatar" />

</div>

<input type="file" accept="image/*" @change="handleFile" class="hiddenInput" />

css:

hiddenInput给加个display:none, 默认样式比较丑所以给隐藏了

js:

// 打开图片上传

uploadHeadImg: function() {

this.$el.querySelector('.hiddenInput').click()

},

// 将头像显示

handleFile: function(e) {

var that = this;

var imgSize = 100 * 1024;//限制图片大小 返回的是字节所以乘以1024

let $target = e.target || e.srcElement

let file = $target.files[0]

if(file.size > imgSize) {

that.$toast("图片大小不能超过100K")//$toast封装的弹窗

return false

}

var reader = new FileReader()

reader.onload = (data) => {

let res = data.target || data.srcElement

that.nameRes.member_avatar = res.result

//console.log(that.nameRes.member_avatar)

}

reader.readAsDataURL(file)

},

给后台传参需要和后台配合把图片的base64码传给后台解析