前言
在实际项目中,经常需要用户选择图片以便后续的上传,这时要用到Html的input,并将其type设置为file。原生的input上传图片按钮通常无法符合设计稿,我的做法是将其透明度设置为0,再把宽度高度设置为100%。
除此之外,通常还需要前端回显图片,重新选择图片。这里用到FileReader类。
原生的选择框:
理想的选择框:
图片回显及重新选择:
基础框架
vue + elementUI,这里使用vue单文件组件(SFC)实现,但核心代码与所选框架与关。
代码实现
html部分
添加照片