elementUI图片转base64后上传, 以及选择图片后隐藏 选择 图标样式问题

<template>
  <div>
    <el-upload
      :class="fileList.length ? 'hide' : ''"
      action="#"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      ref="upload"
      :auto-upload="false"
      :on-change="change"
      :limit="1"
    >
      <i class="el-icon-plus"></i>
    </el-upload>

    <img class="prew" :src="src" alt="" />
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      date: new Date(),
      // 上传的文件列表
      fileList: [],
      src: '',
    }
  },
  methods: {
    // 上传文件
    uploadFile() {
      console.log(this.fileList[0].raw)
      const reader = new FileReader()
      reader.readAsDataURL(this.fileList[0].raw)
      reader.onload = (res) => {
        console.log(res.target.result)
　　　　　// 这里得到的结果就是 base 64 之后的结果
　　　　　　// 这种做法, 选中图片之后, 不会立即上传到服务器, 可以自己手动上传
        this.src = res.target.result
      }
    },
    // 图片预览
    handlePictureCardPreview(a, b) {
      this.src = a.url
    },
    // 图片移除
    handleRemove() {},
    //
    change(file, fileList) {
      this.fileList = fileList
      this.src = file.url
    },
  },
  created() {},
}
</script>

<style lang='scss'>
// 隐藏 点击 上传的样式

.hide .el-upload--picture-card {
  display: none;
}
// 预览样式
.prew {
  width: 400px;
  height: auto;
  max-height: 400px;
  position: relative;
}
</style>