基于ElementUI的单文件上传组件

背景

ElementUI自带一个单文件选择的组件。但是该组件没有删除功能。
此处基于此组件进行二次开发。

说明

没有设置v-model，取值时使用ref取值
取值时，通过this.$refs.[ref值].img获取到图片信息
其中base64String为图片的base64编码，需要原生file文件的请自行修改源码

代码

// 单文件上传组件，通过ref取值

<template>
  <el-upload class="one-file-up" :style="fixStyle" :accept="accept" action="111" :show-file-list="false" :before-upload="checkImg" :on-change="handleImgChange" :on-remove="handleImgRemove" :auto-upload="false">
    <div class="slot-div" v-show="!img.hadUp">
      <slot name="header"></slot>
    </div>
    <img v-if="img.hadUp" :src="img.base64String">
    <i v-else class="el-icon-plus"></i>
    <i v-if="img.hadUp" class="el-icon-delete" :style="delFixStyle" @click="deleteImg"></i>
    <div class="slot-div" v-show="!img.hadUp">
      <slot name="bottom">
        <label class="slot-label"></label>
      </slot>
    </div>
  </el-upload>
</template>

<script>
export default {
   
  name: 'oneFileUp',
  props: {
   
    maxSize: {