完成上传页面主要逻辑，网络问题仍未解决

src/upload/upload.css

@@ -28,23 +28,40 @@
 .message-box {
   width: 100%;
   height: 200px;
+  margin-top: 40px;
 }
 .message-box-textarea {
   width: 100%;
   resize: none;
   height: 100%;
   box-sizing: border-box;
+  border-radius: 8px;
+  font-size: 16px;
+  padding: 10px;
+}
+.message-box-textarea:focus {
+  outline: none;
+  border-color: #008cff;
 }
 
 .upload-box {
   width: 100%;
   height: 200px;
+  margin-top: 15px;
 }
 .upload-area {
   width: 100%;
   height: 100%;
   border: 2px dashed blue;
   border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  cursor: pointer;
+}
+.upload-area-text {
+  font-size: 16px;
 }
 
 .btn-upload {

src/upload/upload.js

@@ -1,19 +1,48 @@
 import { Component } from 'react';
 import Dropzone from 'react-dropzone';
+import Spinner from '../components/Spinner/Spinner';
+import UploadUnit from '../components/UploadUnit/UploadUnit';
+import { post } from 'axios';
+import { apis } from '../helper/apis';
+
 import './upload.css';
 
 export class UploadContainer extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      files: [],
-      msg: ""
+      file: null,
+      msg: "",
+      url: "",
+      submitting: false
     };
+    this.handleChange = this.handleChange.bind(this);
+    this.handleUploadError = this.handleUploadError.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
   }
 
-  handleChange = files => {
-    console.log(files);
-    this.setState({ files });
+  handleChange(files) {
+    if (files.length > 0)
+      this.setState({ file: files[0] });
+  }
+
+  handleUploadError(msg) {
+    this.setState({ submitting: false });
+  }
+
+  handleSubmit() {
+    if ((this.state.msg === "" && this.file === null) || this.state.submitting) return;
+    this.setState({ submitting: true });
+  }
+
+  componentDidUpdate() {
+    if (this.state.submitting && (!this.state.file || this.state.url !== "")) {
+      // upload using axios
+      post(apis.submitMessage, { content: this.state.msg, image: this.state.url })
+        .then(res => {
+          this.setState({ submitting: false, msg: "", url: "" });
+        });
+    }
   }
 
   render() {
@@ -36,26 +65,38 @@ export class UploadContainer extends Component {
               placeholder="留下您的寄语"
               value={this.state.msg}
               onChange={e => this.setState({ msg: e.target.value })}
+              disabled={this.state.submitting}
             />
           </div>
           <div className="upload-box">
-            <Dropzone
-              onDropAccepted={this.handleChange}
-              multiple={true}
-              accept="image/*"
-            >
-              {({ getRootProps, getInputProps, isDragActive }) => (
-                <div {...getRootProps()} className="upload-area">
-                  <input {...getInputProps()} />
-                  <p className="upload-area-text">拖拽</p>
-                </div>
-              )}
-            </Dropzone>
+            {this.state.file ? (
+              <UploadUnit
+                file={this.state.file}
+                onUpload={url => this.setState({ url })}
+                onUploadError={this.handleUploadError}
+                onCancel={() => this.setState({ file: null, url: "" })}
+                upload={this.state.submitting}
+              />
+            ) : (
+              <Dropzone
+                onDropAccepted={this.handleChange}
+                multiple={false}
+                accept="image/*"
+              >
+                {({ 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"
-            onClick={this.handleUpload}
-          >提交</button>
+            onClick={this.handleSubmit}
+            disabled={(this.state.msg === "" && this.state.file === null) || this.state.submitting}
+          >{this.state.submitting ? (<Spinner />) : '提交'}</button>
         </div>
       </div>
     );