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

package.json

@@ -8,7 +8,6 @@
     "dotenv": "^10.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-dropzone": "^11.3.4",
     "react-scripts": "4.0.3",
     "sweetalert2": "^11.0.20"
   },

src/App.css

@@ -19,7 +19,7 @@ a.btn {
 .btn:active {
   color: white !important;
 }
-.btn:hover {
+.btn:hover(:not(:disabled)) {
   filter: brightness(1.2);
 }
 
@@ -36,6 +36,9 @@ button.btn {
 .btn-gray {
   background-color: #d9d9d9;
 }
+.btn-sdu {
+  background-color: #9D0004;
+}
 .btn.btn-light {
   background-color: #fcfafa;
   color: #323232 !important;

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
+          {this.state.src
-            ? <img src={this.state.src} alt="压缩后的图片" />
+            ? <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%);
+  width: 150px;
-  height: 200px;
+  height: 150px;
   min-width: 150px;
-  border: 2px dashed blue;
+  max-width: 100%;
-  border-radius: 8px;
   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 {

src/upload/upload.css

@@ -34,17 +34,20 @@
 }
 .message-box {
   width: 100%;
-  height: 200px;
+  height: 300px;
   margin-top: 40px;
 }
 .message-box-textarea {
   width: 100%;
   resize: none;
   height: 100%;
+  border: none;
+  background-color: #F7F7F7;
   box-sizing: border-box;
-  border-radius: 8px;
+  border-radius: 0;
   font-size: 16px;
-  padding: 10px;
+  padding: 20px;
+  line-height: 1.5em;
 }
 .message-box-textarea:focus {
   outline: none;
@@ -52,23 +55,36 @@
 }
 
 .upload-box {
-  width: 100%;
+  margin-top: 25px;
   height: 200px;
-  margin-top: 15px;
 }
-.upload-area {
+.upload-image-btn {
-  width: 100%;
+  width: 150px;
-  height: 100%;
+  height: 150px;
-  border: 2px dashed blue;
+  background-color: #F7F7F7;
-  border-radius: 8px;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
   cursor: pointer;
+  position: relative;
 }
-.upload-area-text {
+.upload-image-btn > input {
-  font-size: 16px;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  filter: opacity(0);
+  z-index: 1;
+  cursor: pointer;
+}
+.upload-image-btn > svg {
+  width: 40px;
+}
+.upload-image-btn-text {
+  margin-top: 5px;
+  font-size: 14px;
+  color: #666;
 }
 
 .btn-upload {

src/upload/upload.js

@@ -1,5 +1,4 @@
 import { Component } from 'react';
-import Dropzone from 'react-dropzone';
 import Spinner from '../components/Spinner/Spinner';
 import UploadUnit from '../components/UploadUnit/UploadUnit';
 import { post } from '../helper/axios';
@@ -23,7 +22,8 @@ export class UploadContainer extends Component {
     this.handleSubmit = this.handleSubmit.bind(this);
   }
 
-  handleChange(files) {
+  handleChange(e) {
+    const { files } = e.target;
     if (files.length > 0)
       this.setState({ file: files[0] });
   }
@@ -69,7 +69,7 @@ export class UploadContainer extends Component {
           <div className="message-box">
             <textarea
               className="message-box-textarea"
-              placeholder="留下您的寄语"
+              placeholder="你的留言…"
               value={this.state.msg}
               onChange={e => this.setState({ msg: e.target.value })}
               disabled={this.state.submitting}
@@ -85,22 +85,15 @@ export class UploadContainer extends Component {
                 upload={this.state.submitting}
               />
             ) : (
-              <Dropzone
+              <div className="upload-image-btn">
-                onDropAccepted={this.handleChange}
+                <input type="file" accept="image/*" multiple={false} onChange={this.handleChange} />
-                multiple={false}
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 54"><path d="M60.342,102.091l5.331-8a2.249,2.249,0,0,1,1.872-1h18a2.246,2.246,0,0,1,1.872,1l5.332,8h7.094a6.72,6.72,0,0,1,6.7,6.7v31.6a6.722,6.722,0,0,1-6.7,6.7h-46.6a6.722,6.722,0,0,1-6.7-6.7v-31.6a6.72,6.72,0,0,1,6.7-6.7h7.094Zm5.407,0H87.341l-3-4.5H68.751l-3,4.5Zm10.8,35.25a12.75,12.75,0,1,0-12.75-12.75A12.764,12.764,0,0,0,76.545,137.341Zm0-21a8.25,8.25,0,1,1-8.25,8.25A8.261,8.261,0,0,1,76.545,116.341Z" transform="translate(-46.546 -93.091)" fill="#8A8A8A"/></svg>
-                accept="image/*"
+                <div className="upload-image-btn-text">添加图片</div>
-              >
-                {({ getRootProps, getInputProps, isDragActive }) => (
-                  <div {...getRootProps()} className="upload-area">
-                    <input {...getInputProps()} />
-                    <div className="upload-area-text">点击方框添加图片或者将图片拖入框内，支持jpg、png、gif，但均会被转换为jpg</div>
               </div>
             )}
-              </Dropzone>
-            )}
           </div>
           <button
-            className="btn btn-primary btn-upload"
+            className="btn btn-sdu btn-straight btn-upload"
             onClick={this.handleSubmit}
             disabled={(this.state.msg === "" && this.state.file === null) || this.state.submitting}
           >{this.state.submitting ? (<Spinner />) : '提交'}</button>