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

前言

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

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

原生的选择框：

理想的选择框：

图片回显及重新选择：

基础框架

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

代码实现

html部分

<!-- 图片上传框 -->
<div v-show="!imgUploaded" v-loading="loading1" class="upload_block" element-loading-text="图片正在上传" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
<img src="@/icons/add-file.png" alt="add" class="add_tag">
<div class="add_tip">添加照片</div>
<input id="img_input" type="file" class="file_input" multiple @change="uploadFile()">
</div>

<!-- 图片回显框 -->
<div v-if="imgUploaded" id="img_show">
<img :src="imgShow" alt="" class="img_show">
<!-- 图片有上角显示删除角标 -->
<img src="@/icons/del_img.png" alt="del" class="del_tag" @click="delImg()">
</div>

JS部分

<script>
export default {
  data() {
    return {
      imgUploaded: false,
      loading1: false,
      imgShow: '',
    }
  },
  methods: {
    uploadFile() {
      let file = document.getElementById('img_input').files[0]
      if (!/image\/\w+/.test(file.type)) {
        this.$message.error('文件必须为图片！')
        return
      }
      // 利用FileReader读取图片实现回显
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = (e) => {
        this.imgShow = e.target.result
      }
      if (!file) {
        return
      }
    },
    // 删除图片功能，以便用户重新选择
    delImg() {
      this.imgUploaded = false
      const files = document.getElementById('img_input')
      files.value = ''
    }
  }
}
</script>

CSS部分

<style lang="scss">
.container {
  .img_uploaded {
    padding-bottom: 40px;
    height: auto;
  }

  .img_show {
    max-width: 510px;
    height: auto;
  }

  // 删除图片按钮
  .del_tag {
    position: absolute;
    right: 2px;
    top: 2px;
    width: 24px;
    height: 24px;
    cursor: pointer;
  }

  #img_show {
    position: relative;
    display: inline-block;
  }

  .upload_block {
    display: inline-block;
    text-align: center;
    width:360px;
    height:220px;
    background: #FFFFFF;
    border: 1px solid #CFD8DC;
    border-radius:4px;
  }

  .upload_block .add_tag {
    margin-top: 76px;
    width: 33px;
    height: 33px;
  }

  .upload_block .add_tip {
    margin-top: 31px;
    font-size:14px;
    color: #90A4AE;
  }

   // 原生的Input标签
  .file_input {
    position: relative;
    right: 0;
    top: -162px;
    opacity: 0;
    filter: alpha(opacity=0);
    cursor: pointer;
    width: 100%;
    height: 100%;
  }
}
</style>

总结

本文主要实现三个需求：

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