import React , { useState , useEffect } from 'react' ; import avatarPicker from '@src/client/vendors/avatar-picker' ; import { useStore , useSelector } from 'react-redux' ; import { getUserInfo } from '@app/redux/reducers/user' ; import { loadUserInfo , updateUser } from '@app/redux/actions/user' ; import QiniuUploadImage from '@app/components/qiniu-upload-image' ; import './styles/index.scss' ; export default function ( ) { const [ fileUpload , setFileUpload ] = useState ( null ) ; const me = useSelector ( ( state ) => getUserInfo ( state ) ) ; if ( ! me ) return null ; const store = useStore ( ) ; const _loadUserInfo = ( params ) => loadUserInfo ( params ) ( store . dispatch , store . getState ) ; const _updateUser = ( params ) => updateUser ( params ) ( store . dispatch , store . getState ) ; const upload = function ( url ) { avatarPicker ( { img : url , selectAreaScale : 0.9 , previews : [ ] , imgLoadComplete : function ( ) { } , done : async function ( p ) { let avatar = url + "?imageMogr2/crop/!" + parseInt ( p . width ) + "x" + parseInt ( p . height ) + "a" + parseInt ( p . x ) + "a" + parseInt ( p . y ) + "/thumbnail/!200" ; await _updateUser ( { avatar : avatar } ) ; _loadUserInfo ( { } ) ; } } ) ; } ; useEffect ( ( ) => { setFileUpload ( < QiniuUploadImage upload = { upload } text = { '上传头像' } multiple = { false } accept = "image/jpeg, image/png" / > ) ; } , [ ] ) ; return ( < div > < div className = "card" > < div className = "card-header" > < div className = "card-title" > 头像 < /div></div > < div className = "card-body" > < div styleName = "avatar" > < img src = { me . avatar_url . replace ( '!50' , "!200" ) } /> < /div> < div styleName = "upload" > { fileUpload } < /div> < /div> < /div> < /div>); }