大家好！我叫戴向天

QQ群：602504799

QQ:809002582

如若有不理解的，可加QQ群进行咨询了解

layout-div 组件详情 》https://blog.csdn.net/weixin_41088946/article/details/91448369
layout-img 组件详情》https://blog.csdn.net/weixin_41088946/article/details/90759906

<template>
  <div class="posi-r">
    <slot name="cover"></slot>
    <input type="file" class=" op-0 posi-a w100 hei100 t0 l0" ref="ddFile" :multiple="multiple"
           @change="getFiles" :accept="accept"/>
  </div>
</template>


<script>

  export default {
     props: {
      accept: {           //文件选择的格式 默认所有的图片格式
        default: 'image/*'
      },
      value: {},      // 绑定的数据可以为 string | array
      multiple: {     // 是否可以多图  more =》 false
        type: Boolean,
        default: false
      },
      max: {        // 最大图片数量 默认一张
        type: Number,
        default: 1
      }
    },
    data() {
      return {
        urls: [],
      }
    },
    methods: {
      getFiles() {
        const files = this.$refs.ddFile.files;
        if (!files) return false;
        let urls = []
        for (let i in files) if (!isNaN(+i) && i < this.max) urls.push(URL.createObjectURL(files[i]));

        if (this.getType(this.value) == 'string') {
          this.$emit('input', urls[0])
        } else if (this.getType(this.value) == 'array') {
          this.$emit('input', urls)
        }
        this.$emit('change', {
          filePaths: urls,
          files,
        })

      },
    
    }
  }

</script>

使用方法：

<template>
	<img :src=face/>
	选中的文件列表：=》》{{files}}
	<layout-div :w="206" :h="206" class=" posi-r flex-center" :br-r="200">
          <div class="posi-a bg-e op-1 w100 hei100 t0 l0"></div>
          <file class="posi-a-i bg-e op-0 w100 hei100 " v-model="face"
	                   @change="(e)=>files =e.files"/>
        </layout-div>

</template>
<script>
	export default{
		data(){
			return {
				face:'',
				files:[]
			}
		}
	}
</script>

class - style 具体内容如下

css 参考的 UI设计尺寸为 750*1334

.posi-r {
  position: relative;
  z-index: 1;
}
.op-0 {
  opacity: 0;
}
.posi-a {
  position: absolute;
  z-index: 1;
}
.w100 {
  width: 100%;
}
.hei100 {
  height: 100%;
}

.t0 {
  top: 0;
}
.l0 {
  left: 0;
}
.posi-a-i {
  position: absolute !important;
  z-index: 1;
}
.flex-center {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.mar-a {
  margin: 0 auto;
}
.bg-e {
  background-color: #eee;
}
.op-1 {
  opacity: 0.1;
}

实例代码图

效果图

![前端 vue input-file 组件封装 - 戴向天](https://img-blog.csdnimg.cn/2019061810120898.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTA4ODk0Ng==,size_16,color_FFFFFF,t_70