vue单个文件选择以及单个图片文件选择器组件。

单个文件选择组件

代码

<template>
<div class="cp_container">
    <div 
        class="bt"
        @click="onClick">
        <template>
            {{title || '选择文件'}}
        </template>
    </div>
    <input
        ref="input" 
        type="file" 
        name="file"
        :accept="accept"
        @change="changeFile"/>
</div>
</template>

<script>
//单个文件选择组件
export default {
    props:{
        title:{
            type:String,
            default:'',
        },
        accept:{
            type:String,
            default:'',
        },
    },
    methods: {
        onClick(){  //选择文件
            this.$refs.input.value = '';  //清空选择的文件
            this.$refs.input.click();
        },
        changeFile(e) {
            this.$emit('onChange', e.target.files[0]);
        },
    },
}
</script>

<style scoped lang="scss">
.cp_container{
    position: relative;
    .bt {
        padding: 10px;
        color: #1e3c6a;
        background-color: #1dc979;
        border-radius: 3px;
        font-size: 15px;
        text-align: center;
        font-weight: bold;
        box-sizing: border-box;
        cursor: pointer;
    }
    input{
        position: absolute;
        display:none;
        top: 0;
        left: 0;
    }
}
</style>

单个图片文件选择

<template>
<div class="cp_container">
    <div 
        class="bt"
        @click="onClick">
        <img
            v-if="imgUrl"
            :src="imgUrl" 
            alt="">
        <span 
            v-else>
            +
        </span>
    </div>
    <input
        ref="input" 
        type="file" 
        name="file"
        :accept="accept || 'image/*'"
        @change="changeFile"/>
</div>
</template>

<script>
//单个图片文件选择组件(只做选择)
export default {
    props:{
        imgUrl:{  //图片地址
            type:String,
            default:'',
        },
        accept:{  //文件类型限制
            type:String,
            default:'',
        },
    },
    methods: {
        onClick(){  //选择文件
            this.$refs.input.value = '';  //清空选择的文件
            this.$refs.input.click();
        },
        changeFile(e) {
            this.$emit('onChange', e.target.files[0]);
        },
    },
}
</script>

<style scoped lang="scss">
.cp_container{
    position: relative;
    .bt {
        color: #1e3c6a;
        background-color: #dfdfdf;
        border-radius: 3px;
        text-align: center;
        font-weight: bold;
        box-sizing: border-box;
        cursor: pointer;
        width: 100px;
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #b3b3b3;
        >img{
            width: 100%;
            height: 100%;
            border-radius: 3px;
            object-fit: cover;
        }
        >span{
            font-size: 30px;
            line-height: 1;
        }
    }
    input{
        position: absolute;
        display:none;
        top: 0;
        left: 0;
    }
}
</style>