好气哦，视觉放飞自我了，所以我也放飞自我了，并砍掉了拖拽功能（有机会再做）

src/components/UploadUnit/UploadUnit.js

@@ -124,8 +124,8 @@ export default class UploadUnit extends Component {
     return (
       <div className="upload-wrap">
         <div className={this.state.status === -1 ? 'upload-unit' : 'upload-unit open'} style={{ width: this.state.status <= 1 ? '' : `${this.state.width}px` }}>
-          {this.state.status >= 2
-            ? <img src={this.state.src} alt="压缩后的图片" />
+          {this.state.src
+            ? <img src={this.state.src} alt="压缩后的图片" style={{ filter: this.state.status === -1 ? 'opacity(0)' : '' }} />
             : null
           }
           {this.state.status >= 0

src/components/UploadUnit/upload.css

@@ -1,31 +1,35 @@
 .upload-wrap {
   width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
 }
 .upload-unit {
-  width: calc(100%);
-  height: 200px;
+  width: 150px;
+  height: 150px;
   min-width: 150px;
-  border: 2px dashed blue;
-  border-radius: 8px;
+  max-width: 100%;
   box-sizing: border-box;
-  transition: width .3s ease-out, height .3s ease-out, border .3s ease-out;
+  background-image: linear-gradient(45deg, #EEE 25%, transparent 25%), linear-gradient(-45deg, #EEE 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #EEE 75%), linear-gradient(-45deg, transparent 75%, #EEE 75%);
+  background-size: 10px 10px;
+  background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
+  background-color: #EEE;
+  transition: width .3s ease-out, height .3s ease-out, background-color .3s ease-out, filter .3s ease-out;
   display: flex;
   flex-direction: column;
   align-items: center;
   overflow: hidden;
+  filter: brightness(1.03);
 }
 .upload-unit.open {
   width: 200px;
+  height: 200px;
   border-width: 0;
+  background-color: transparent;
+  filter: none;
 }
 .upload-unit > img {
   margin-bottom: -200px;
   height: 200px;
   animation: fade-in .3s ease-out;
-  border-radius: 8px;
+  transition: filter .3s ease-out;
 }
 
 .upload-unit-mask {