antd mobile ImagePicker实现点击头像上传

另类方法处理点击头像进行上传：将设置为绝对定位并且设为透明图层覆盖在显示的头像图片上，点击正常上传

 

html: 

const renderAvatar=()=>{
            if(avatar){
                return 
            }else{
                return 
            }
        }

                        {renderAvatar()}
                        
                    

js 

 //选择图片
    onChange = (files, type, index) => {
        const { dispatch } = this.props;
        if (type == 'add') {
            var file = files[files.length - 1].file
            let formData = new FormData();
            formData.append("file", file);
      
            //files[files.length - 1].url = '../../../../src/white.png'
            this.setState({files,animating:true},()=>{

                dispatch({
                    type:'user/fetchChangeAvatar',
                    payload:formData,
                    callback:(res)=>{
                        this.setState({
                            avatar:res.data.url,
                            animating:false
                        })
                    }
                })
            })
            
          } else {
            this.setState({files});
          }
    }

css:

.avatar_box{
    margin:0 auto;
    width: 2rem;
    height: 2rem;
    position: relative;
    .user_avatar{
        width: 100%;
        height: 100%;
        border-radius: 50%;
        position: absolute;
    }
}
.user_change :global{
    .am-image-picker-list .am-flexbox{
        position: absolute;
        width: 100%;
    }
    .am-image-picker-list .am-flexbox .am-flexbox-item{
        margin-right: 0;
    }
    .am-image-picker-list{
        padding:0;
    }
    .am-image-picker-list .am-image-picker-item .am-image-picker-item-content{
        border-radius: 50%;
    }
    .am-image-picker-list .am-image-picker-upload-btn{
        border-radius: 50%;
        border:none;
        background-color: transparent;
    }
    .am-image-picker-list .am-image-picker-upload-btn:before, .am-image-picker-list .am-image-picker-upload-btn:after{
        width:0;
        height: 0;
    }
}