图片input框自定义样式及前端回显

前言

在实际项目中，经常需要用户选择图片以便后续的上传，这时要用到Html的input,并将其type设置为file。原生的input上传图片按钮通常无法符合设计稿，我的做法是将其透明度设置为0，再把宽度高度设置为100%。

除此之外，通常还需要前端回显图片，重新选择图片。这里用到FileReader类。

原生的选择框：

基础框架

vue + elementUI，这里使用vue单文件组件（SFC）实现，但核心代码与所选框架与关。

代码实现

html部分

添加照片

JS部分

CSS部分

总结

本文主要实现三个需求：

1. input框样式自定义，主要是通过将透明度opacity设置为0；
2. 用户选择图片后回显在前端页面上，主要是运用FileReader()技术；
3. 增加删除按钮，用户可重新选择，主要是将input框的files对象的value属性置空。