style: 优化样式

src/components/Upload/index.less

@@ -11,6 +11,11 @@
 .avatarUploader {
   display: inline-block;
   text-align: left;
+  .ant-upload-list-item-thumbnail>img{
+    background: #aaa;
+    background-image: linear-gradient(white 0px, transparent 0), linear-gradient(hsla(0,0%,100%,.3) 1px, transparent 0), linear-gradient(90deg, hsla(0,0%,100%,.3) 1px, transparent 0);
+    background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px;
+  }
 }
 
 .wallBtn {
@@ -23,6 +28,12 @@
   border-bottom: 1px solid #2f54eb;
 }
 
+.svgBg{
+  background: #aaa;
+  background-image: linear-gradient(white 0px, transparent 0), linear-gradient(hsla(0,0%,100%,.3) 1px, transparent 0), linear-gradient(90deg, hsla(0,0%,100%,.3) 1px, transparent 0);
+  background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px;
+}
+
 .imgBox {
   display: flex;
   flex-wrap: wrap;

src/components/Upload/index.tsx

@@ -85,6 +85,7 @@ class PicturesWall extends React.Component<PicturesWallType> {
   };
 
   handleModalOk = () => {
+    const { maxLen = 1 } = this.props;
     const fileList = [
       {
         uid: uuid(8, 16),
@@ -93,11 +94,12 @@ class PicturesWall extends React.Component<PicturesWallType> {
         url: this.state.curSelectedImg,
       },
     ];
-    this.props.onChange && this.props.onChange(this.props.maxLen === 1 ? fileList[0].url : fileList.map(f => f.url));
+    this.props.onChange && this.props.onChange( maxLen === 1 ? fileList[0].url : fileList.map(f => f.url));
     this.setState({ fileList, wallModalVisible: false });
   };
 
   handleChange = ({ file, fileList }: UploadChangeParam<UploadFile<any>>) => {
+    const { maxLen = 1 } = this.props;
     this.setState({ fileList });
     if (file.status === 'done') {
       const files = fileList.map(item => {
@@ -105,7 +107,7 @@ class PicturesWall extends React.Component<PicturesWallType> {
         const url =  thumbUrl || this.getImageUrl(data);
         return { uid: uuid(8, 16), name, status, url };
       });
-      this.props.onChange && this.props.onChange( this.props.maxLen === 1 ? files[0].url : files.map(f => f.url));
+      this.props.onChange && this.props.onChange( maxLen === 1 ? files[0].url : files.map(f => f.url));
     }
   };
 
@@ -178,7 +180,7 @@ class PicturesWall extends React.Component<PicturesWallType> {
             aspect={cropRate as number}
           >
             <Upload
-              fileList={fileList}
+              fileList={fileList.map(f => ({...f, url: this.getImageUrl(f.url) }))}
               onPreview={this.handlePreview}
               onChange={this.handleChange}
               name="singleFile"
@@ -187,8 +189,8 @@ class PicturesWall extends React.Component<PicturesWallType> {
               action={action}
               withCredentials={withCredentials}
               headers={{
-                'x-requested-with': localStorage.getItem('user') || '',
-                token: localStorage.getItem('token') || '',
+                // 'x-requested-with': localStorage.getItem('user') || '',
+                Authorization: 'Bearer ' + localStorage.getItem('token') || '',
                 ...headers,
               }}
               beforeUpload={this.handleBeforeUpload}
@@ -198,7 +200,7 @@ class PicturesWall extends React.Component<PicturesWallType> {
           </ImgCrop>
         ) : (
           <Upload
-            fileList={fileList}
+            fileList={fileList.map(f => ({...f, url: this.getImageUrl(f.url) }))}
             onPreview={this.handlePreview}
             onChange={this.handleChange}
             name="singleFile"
@@ -207,8 +209,8 @@ class PicturesWall extends React.Component<PicturesWallType> {
             action={action}
             withCredentials={withCredentials}
             headers={{
-              'x-requested-with': localStorage.getItem('user') || '',
-              token: localStorage.getItem('token') || '',
+              // 'x-requested-with': localStorage.getItem('user') || '',
+              Authorization: 'Bearer ' + localStorage.getItem('token') || '',
               ...headers,
             }}
             beforeUpload={this.handleBeforeUpload}
@@ -225,7 +227,7 @@ class PicturesWall extends React.Component<PicturesWallType> {
           footer={null}
           onCancel={this.handleCancel}
         >
-          <img alt="预览图片" style={{ width: '100%' }} src={this.getImageUrl(previewImage)} />
+          <img alt="预览图片" className={styles.svgBg} style={{ width: '100%' }} src={this.getImageUrl(previewImage)} />
         </Modal>
         <Modal
           visible={wallModalVisible}