在前端开发中,为了更好的用户体验,在头像上传时会先将图片显示到页面然后点击保存按钮 完成图片的上传成功 代码部分有参考他人的写法。
html代码:
<div id="myPhoto" v-show="personalPhoto">
<div class="viewPhoto">
<img src="" alt="" id="portrait"style="width: 300px;height: 300px" />
</div>
<div class="listBox">
<dl>
<dt>请上传图片</dt>
<dd>
<input type="file"id="saveImage" name="myphoto" >
</dd>
</dl>
</div>
<div class="save">
<input type="button" value="保存图片" @click="imageSubmit">
</div>
</div>
js代码:
//实时显示该图