如题的需求:使用input 标签type=file来选择图片文件并显示在div/image标签中的实现。不过文件选择组件不能自定义我要的按钮,我使用了样式给input隐藏起来,然后自己再使用div画了一个按钮(选择照片)
html代码如下:
<div style="width:96px;height: 128px;border: #A2A2A2 1px solid;text-align: center;background: #FAFAFA;"> <img :src="portraitData" v-if="portraitData" /> </div> <label class='tp' for="uploads" style="margin: 0 auto;"> <input id="uploads" style="visibility: hidden;width: 1px;" type="file" capture="camera" @change="previewImage" accept="image/jpeg"> <div style='background: #0FAEFE;display: inline-block;color:white;padding:4px 10px;text-align: center;'>选择照片</div> </label>
利用previewImage()函数来实现显示选择后的图片,js代码如下:
previewImage: function () { var _this = this; var input = event.target; if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { _this.portraitData = e.target.result; } reader.readAsDataURL(input.files[0]); } },
文章评论