reselect avatar

i18n.json

@@ -11,6 +11,7 @@
     "reset-info": "Reset User Info",
     "Change-Avatar" :"Change Avatar",
     "Upload-Avatar" :"Confirm Upload Avatar",
+    "Reselect-Avatar":"Reselect Avatar",
     "upload":"upload",
     "avatar": "Avatar",
     "nickname": "Nickname",
@@ -107,6 +108,7 @@
     "reset-info": "修改信息",
     "Change-Avatar" :"修改头像",
     "Upload-Avatar":"确认上传头像",
+    "Reselect-Avatar":"重新选择头像",
     "upload":"上传",
     "avatar": "头像",
     "nickname": "昵称",

src/routes/Profiles.js

@@ -107,30 +107,33 @@ class Profiles extends React.Component {
               <Form onSubmit={this.onUpdateSubmit}>
 
                 <FormItem style={{ display: 'flex', justifyContent: 'center' }}>
-                  <div style={{ display: isUpload ? 'flex' : 'none', flexDirection: 'column'}}>
+                  <div style={{flexDirection: 'column'}}>
                     <Cropper
                       ref={(cropper) => {
                         this.cropper = cropper;
                       }}
                       src={imageUrl || defaultAvatar}
                       className="cropper-image"
-                      style={{ height: '300px', width: '300px' }}
+                      style={{ height: '300px', width: '300px', display: isUpload ? 'flex' : 'none' }}
                       aspectRatio={1 / 1}
                       autoCropArea={1}
                       guides
                     />
+                    <img
+                      alt="avatar"
+                      style={{ height: '300px', width: '300px', display: !isUpload ? 'flex' : 'none' }}
+                      src={avatar || imageUrl || defaultAvatar}
+                    />
                     <br/>
-                    <Button type="primary" onClick={this.handleUpload}>
+                    <Button type="primary" onClick={this.handleUpload} style={{display:isUpload ? 'flex' : 'none'}}>
                       <Icon type="check"/> <Format id="Upload-Avatar"/>
                     </Button>
-                  </div>
-
-                  <div style={{ display: !isUpload ? 'flex' : 'none', flexDirection: 'column' }}>
-                    <img alt="avatar" style={{ height: '300px', width: '300px' }} src={avatar || imageUrl || defaultAvatar}/>
                     <br/>
-                    <Button style={{ padding: '4px 0' }}>
+                    <Button type="default">
                       <label style={{ display: 'flex', flex: 1, justifyContent: 'center', alignItems: 'center' }}>
-                        <Icon type="plus"/> <Format id="Change-Avatar"/>
+                        <Icon type="plus"/>
+                        <Format id="Change-Avatar" style={{display:isUpload ? 'flex' : 'none'}}/>
+                        <Format id="Reselect-Avatar" style={{display:!isUpload ? 'flex' : 'none'}}/>
                         <input
                           type="file" onChange={this.onGetFile} ref={(file) => {
                             this.file = file;