完成上传页面结构

src/App.css

@@ -1,14 +1,20 @@
 a.btn {
   text-decoration: none;
+}
+.btn {
   color: white !important;
   border-radius: .5rem;
   padding: .375rem 1.75rem;
   font-size: 1.1rem;
 }
-a.btn:active {
+.btn:active {
   color: white !important;
 }
 
+button.btn {
+  border: none;
+}
+
 .btn-primary {
   background-color: #318ffb;
 }

src/components/UploadUnit/UploadUnit.js

@@ -1,5 +1,8 @@
+import './upload.css';
+
 import { Component } from "react";
-import { apis } from '../resources.json';
+import { apis } from '../../resources.json';
+
 
 export default class UploadUnit extends Component {
   toBlobPromise = null;

src/resources.json

@@ -0,0 +1,5 @@
+{
+  "apis": {
+    "uploadImage": "https://image.kieng.cn/upload.html?type=jd"
+  }
+}

src/upload/upload.css

@@ -0,0 +1,53 @@
+.banner {
+  height: 60px;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+
+.sdu,
+.user {
+  height: 100%;
+  display: flex;
+}
+.sdu-logo,
+.user-logo {
+  height: 100%;
+}
+.sdu-name,
+.user-name {
+  height: 100%;
+  line-height: 60px;
+  font-size: 24px;
+}
+
+.content {
+  width: 800px;
+  margin: 0 auto;
+}
+.message-box {
+  width: 100%;
+  height: 200px;
+}
+.message-box-textarea {
+  width: 100%;
+  resize: none;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.upload-box {
+  width: 100%;
+  height: 200px;
+}
+.upload-area {
+  width: 100%;
+  height: 100%;
+  border: 2px dashed blue;
+  border-radius: 8px;
+}
+
+.btn-upload {
+  float: right;
+  margin-top: 10px;
+}

src/upload/upload.js

@@ -1,29 +1,62 @@
 import { Component } from 'react';
+import Dropzone from 'react-dropzone';
 import './upload.css';
 
-// copilot抄来的模板，可恶怎么有这么明显的bug啊
 export class UploadContainer extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      files: []
+      files: [],
+      msg: ""
     };
   }
 
-  handleChange = (e) => {
+  handleChange = files => {
-    const files = e.target.files;
+    console.log(files);
     this.setState({ files });
-  };
+  }
 
   render() {
     return (
       <div className="upload-container">
-        <input type="file" onChange={this.handleChange} multiple />
+        <div className="banner">
-        {Array.prototype.map.call(this.state.files, (file, i) => (
+          <div className="sdu">
-          <div key={i} className="upload-item">
+            <img src="" className="sdu-logo" alt="logo" />
-            <p className="upload-item-name">{file.name}</p>
+            <div className="sdu-name">山东大学</div>
           </div>
-        ))}
+          <div className="user">
+            <img src="" className="user-avatar" alt="avatar" />
+            <div className="user-name"></div>
+          </div>
+        </div>
+        <div className="content">
+          <div className="message-box">
+            <textarea
+              className="message-box-textarea"
+              placeholder="留下您的寄语"
+              value={this.state.msg}
+              onChange={e => this.setState({ msg: e.target.value })}
+            />
+          </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>
+          </div>
+          <button
+            className="btn btn-primary btn-upload"
+            onClick={this.handleUpload}
+          >提交</button>
+        </div>
       </div>
     );
   }