背景
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: {