input 上传图片并预览&图片转base64格式

页面结构：

 

 

函数方法：

图片上传：

图片预览：

删除图片：

 

 

 

转换为base64图片：

 

css样式：

.upload-imgs {

   overflow: hidden;

   font-size: 0;

   padding: 0;

   margin-left: 4px;

li {

  position: relative;

  width: 86px;

  height: 86px;

  font-size: 14px;

  display: inline-block;

  margin-right: 25px;

  margin-bottom: 10px;

  border: 1px solid #ccc;

  text-align: center;

  vertical-align: middle;

p {

  font-size:14px;

  font-family:PingFangSC-Regular,PingFang SC;

  font-weight:400;

  color:rgba(158,164,169,1);

  margin-top: 36px;

}

.upload{

  position: absolute;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  width: 86px;

  height: 86px;

  z-index: 2;

  opacity: 0;

  padding: 0;

  cursor: pointer;

}

}

li:hover {

 .img {

  .close {

    display: block;

    position: absolute;

    right: 2px;

    top: -10px;

    line-height: 1;

    font-size: 18px;

    color: #aaa;

  }

 }

}

.img{
  position: relative;
  width: 86px;
  height: 86px;
  line-height: 60px;
  margin: 8px 0;
  vertical-align: middle;

img{
  width: 72px;
  height: 72px;
  vertical-align: middle;

}

.close{
   display: none;
   &:hover{
   cursor: pointer;
}

}

}

input#file-upload-button {
  margin: 0 !important;
  padding: 0 !important;
}
}