完成上传页面结构

src/components/UploadUnit/UploadUnit.js

@@ -0,0 +1,117 @@
+import { Component } from "react";
+import { apis } from '../resources.json';
+
+export default class UploadUnit extends Component {
+  toBlobPromise = null;
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      // 0: loading, 1: loaded, 2: compressing, 3: uploading, 4: uploaded
+      status: 0,
+      src: null
+    };
+  }
+
+  selected(file) {
+    if (file) {
+      if (!["image/jpeg", "image/png", "image/gif"].includes(file.type))
+        return alert('请不要上传jpg、png、gif格式以外的文件！')
+      let reader = new FileReader();
+      reader.onload = () => {
+        var image = new Image();
+        image.onload = () => setTimeout(() => this.convert(image), 1000);
+        image.src = reader.result;
+      };
+      reader.readAsDataURL(file);
+    }
+  }
+
+  convert(img) {
+    if (this.converted) return;
+    var canvas = document.createElement('canvas');
+    var { width, height } = img;
+    if (width > 1600) {
+      height *= 1600 / width;
+      width = 1600;
+    }
+    if (height > 1200) {
+      width *= 1200 / height;
+      height = 1200;
+    }
+    canvas.width = width;
+    canvas.height = height;
+    canvas.getContext('2d').drawImage(img, 0, 0, width, height);
+    this.toBlobPromise = new Promise(res => {
+      canvas.toBlob(blob => {
+        res(blob);
+      }, 'image/jpeg', 0.8);
+    })
+    this.converted = true;
+    this.setState({ img_base64: canvas.toDataURL('image/jpeg', 0.8) });
+  }
+
+  async upload() {
+    var el = document.getElementById('process-bubble');
+    el.style.display = '';
+    setTimeout(() => {
+      el.className = 'show';
+    }, 100);      
+    var xhr = new XMLHttpRequest();
+    xhr.onreadystatechange = () => {
+      if (xhr.readyState === 4) {
+        if (xhr.status === 200) {
+          var data = JSON.parse(xhr.responseText);
+          if (data.code === 200) {
+            this.setState({ status: 4 });
+            this.props.onUpload(data.data.url);
+          }
+          else {
+            this.setState({ status: 1 });
+            this.props.onUploadError(data.msg);
+          }
+        }
+        else {
+          this.setState({ status: 1 });
+          this.props.onUploadError('上传失败：服务器出错');
+        }
+      }
+    };
+    xhr.onerror = () => {
+      this.setState({ status: 1 });
+      this.props.onUploadError('请求失败，请检查网络');
+    }
+    xhr.open("POST", apis.uploadImage, true);
+    xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
+
+    var fd = new FormData();
+    fd.append("image", await this.toBlobPromise, 'image.jpg');
+    xhr.send(fd);
+  }
+
+  render() {
+    return (
+      <div className="upload-unit">
+        {
+          this.state.status !== 0
+            ? <img src={this.state.src} alt={this.state.status === 1 ? '原图片' : '压缩后的图片'} />
+            : null
+        }
+        <div className="duo-animation duo-expanding-rect">
+          <div></div>
+          <div></div>
+        </div>
+        <div className="duo-animation duo-shrinking-rect">
+          <div></div>
+          <div></div>
+        </div>
+        <div className="rising-arrow">
+          <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M170.7 381.1c-23.3 23.3-23.3 61.2 0 84.5 11.7 11.7 27 17.5 42.3 17.5s30.6-5.9 42.3-17.5l196.8-196.8v631c0 33 26.8 59.8 59.8 59.8s59.8-26.8 59.8-59.8v-631l196.8 196.8c23.3 23.3 61.2 23.3 84.5 0s23.3-61.2 0-84.5L554.1 82.2c-23.3-23.3-61.2-23.3-84.5 0L170.7 381.1z" fill="#d91604"></path></svg>
+        </div>
+        <div className="checked-circle">
+          <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#1AAC19" p-id="2905"></path><path d="M809.691429 392.777143L732.16 314.514286 447.634286 599.771429 292.571429 443.977143 214.308571 521.508571l155.794286 155.794286 77.531429 77.531429 362.057143-362.057143z" fill="#FFFFFF"></path></svg>
+        </div>
+      </div>
+    );
+  }
+}