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

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

1.页面部分

        

            

                
                
                

                    修改
                    移除
                
            
            

                
                
                选择图片
            
        

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.样式部分