vue项目中封装手动上传单个图片并支持修改和移除

现有的组件库无法满足手动上传文件到服务器，并支持通过按钮修改和移除文件的操作。所以我利用原生input进行封装，如有需要请拿走

1.页面部分

        <div class="upload-picture">
            <div class="uploadItem" v-if="imageUrl">
                <input type="file" v-if="clearInputShow" hidden ref="uploadfile" @change="onChangeFile" />
                <img class="avatar" :src="imageUrl" alt="" srcset="" @click="selectPicture()" />
                <div>
                    <el-button class="button1" type="default" size="mini" @click="selectPicture()">修改</el-button>
                    <el-button class="button1" type="default" size="mini" @click="remove()">移除</el-button>
                </div>
            </div>
            <div class="uploadItem" v-else>
                <input v-if="clearInputShow" type="file" hidden ref="uploadfile" @change="onChangeFile" />
                <i class="el-icon-plus avatar-uploader-icon" @click="selectPicture"></i>
                <el-button class="button" type="default" size="mini" @click="selectPicture">选择图片</el-button>
            </div>
        </div>

2.逻辑部分

export default {
    props: {
        imageUrl: {
            type: String,
            default: ""
        },
    },
    data() {
        return {
            clearInputShow: true
        }
    },
    methods: {
        // 上传
        selectPicture() {
            this.$refs.uploadfile.click();
        },
        // 移除文件
        remove() {
            this.$emit("update:imageUrl", '')
        },

        // 手动上传文件
        onChangeFile() {
            // file上传的文件
            let file = this.$refs.uploadfile.files[0];
            const formData = new FormData()
            // 上传文件的参数都以这种方法
            formData.append('file', file)
            formaData.append('fileName', file.name)
            this.clearInputShow=false
            // 上传接口
            this.$axios.post('接口地址', formData).then(res => {
                this.clearInputShow=true
                // 假设res.data.picUrl是接口返回图片路径
                this.$emit("update:imageList", res.data.picUrl)
            }).catch(error=>{
                 this.clearInputShow=true
            })
        },
    }
}

3.样式部分

<style lang="less" scoped>

.uploadItem {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 178px;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    border: 1px dashed #d9d9d9;
}

.button {
    width: 80px;
    margin-top: 10px;
}

.button1 {
    width: 60px;
    margin-top: 10px;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
    border: 1px dashed #d9d9d9;
}
</style>