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

src/components/UploadUnit/UploadUnit.js

@@ -1,33 +1,62 @@
 import './upload.css';
 
-import { Component } from "react";
-import { apis } from '../../resources.json';
-
+import { Component, Fragment } from "react";
+import { apis } from '../../helper/apis';
+import Spinner from '../Spinner/Spinner';
 
 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
+      // 0: loading, 1: compressing, 2: compressed, 3: uploading, 4: uploaded
+      status: -1,
+      src: null,
+      file: null,
+      progress: 0,
+      width: 0
     };
+    this.upload = this.upload.bind(this);
+    this.handleCancel = this.handleCancel.bind(this);
   }
 
-  selected(file) {
-    if (file) {
-      if (!["image/jpeg", "image/png", "image/gif"].includes(file.type))
-        return alert('请不要上传jpg、png、gif格式以外的文件！')
-      let reader = new FileReader();
+  componentDidMount() {
+    setTimeout(() => {
+      this.readFile(this.props.file);      
+    }, 100);
+  }
+
+  componentDidUpdate() {
+    if (this.props.upload && this.state.status === 2)
+      this.upload();
+  }
+
+  handleCancel() {
+    this.setState({ status: -1 });
+    setTimeout(() => {
+      this.props.onCancel();
+    }, 300);
+  }
+
+  readFile(file) {
+    if (!["image/jpeg", "image/png", "image/gif"].includes(file.type)) {
+      alert('请不要上传jpg、png、gif格式以外的文件！');
+      this.handleCancel();
+      return;
+    }
+    let reader = new FileReader();
+    this.setState({ status: -2 });
+    setTimeout(() => {
+      this.setState({ status: 0 });
       reader.onload = () => {
         var image = new Image();
-        image.onload = () => setTimeout(() => this.convert(image), 1000);
+        // 被注释掉的是用来应对ios巨大图片没来得及加载的问题
+        // image.onload = () => setTimeout(() => this.convert(image), 1000);
+        image.onload = () => this.convert(image);
         image.src = reader.result;
+        this.setState({ status: 1 });
       };
-      reader.readAsDataURL(file);
-    }
+      reader.readAsDataURL(file);   
+    }, 300);
   }
 
   convert(img) {
@@ -45,21 +74,12 @@ export default class UploadUnit extends Component {
     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) });
+    canvas.toBlob(blob => {
+      this.setState({ src: canvas.toDataURL('image/jpeg', 0.8), status: 2, file: blob, width: width / height * 200 });
+    }, '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) {
@@ -70,49 +90,101 @@ export default class UploadUnit extends Component {
             this.props.onUpload(data.data.url);
           }
           else {
-            this.setState({ status: 1 });
+            this.setState({ status: 2 });
             this.props.onUploadError(data.msg);
           }
         }
         else {
-          this.setState({ status: 1 });
+          this.setState({ status: 2 });
           this.props.onUploadError('上传失败：服务器出错');
         }
       }
     };
     xhr.onerror = () => {
-      this.setState({ status: 1 });
+      this.setState({ status: 2 });
       this.props.onUploadError('请求失败，请检查网络');
     }
+    xhr.onprogress = e => {
+      if (e.lengthComputable) {
+        var percent = Math.round(e.loaded * 100 / e.total);
+        this.setState({ progress: percent });
+      }
+    };
     xhr.open("POST", apis.uploadImage, true);
     xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
 
     var fd = new FormData();
-    fd.append("image", await this.toBlobPromise, 'image.jpg');
+    fd.append("image", this.state.file, 'image.jpg');
     xhr.send(fd);
+    this.setState({ status: 3, progress: 0 });
   }
 
   render() {
+    const angle = this.state.progress / 100 * Math.PI * 2;
     return (
-      <div className="upload-unit">
-        {
-          this.state.status !== 0
-            ? <img src={this.state.src} alt={this.state.status === 1 ? '原图片' : '压缩后的图片'} />
+      <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="压缩后的图片" />
             : 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>
+          }
+          {this.state.status >= 0
+            ? (
+              <Fragment>
+                <div className={this.state.status === 2 ? 'upload-unit-mask hide' : 'upload-unit-mask'}>
+                  {this.state.status === 3
+                    ? (
+                      <div className="upload-unit-progress">
+                        <div className="progress-circle">
+                          <svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
+                            <path d={
+                              `M 50,3 A 47,47 0 ${this.state.progress < 50 ? 0 : 1},1 ${50 + Math.sin(angle) * 47},${50 - Math.cos(angle) * 47}`
+                            } fill="transparent" stroke="#FFF" strokeWidth="6" strokeLinecap="round"></path>
+                          </svg>
+                        </div>
+                        <div className="progress-detail">
+                          上传中
+                        </div>
+                      </div>
+                    ) : null
+                  }
+                  {this.state.status <= 1
+                    ? (
+                      <div className="upload-unit-progress">
+                        <Spinner />
+                        <div className="progress-detail">
+                          {this.state.status === 0 ? '加载中' : '压缩中'}
+                        </div>
+                      </div>
+                    ) : null
+                  }
+                  {this.state.status === 4
+                    ? (
+                      <div style={{ color: '#FFF', fontSize: '16px' }}>上传成功</div>
+                    ) : null}
+                </div>
+                <div className="upload-btns">
+                  {this.state.status === 2
+                    ? (
+                      <button className="btn btn-circle btn-ok" onClick={this.upload}>
+                        <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M939.717 106.665l-304.049 324.529-78.769 85.071-225.28 240.246-123.668-115.003-129.182-121.305-78.769 84.283 129.969 121.305 33.083 31.508 129.969 121.305 44.111 40.96 304.049-324.529 78.769-85.071 304.049-324.529-84.283-78.769z" fill="#ffffff"></path></svg>
+                      </button>
+                    ) : null
+                  }
+                  {this.state.status === 2 || this.state.status === 4
+                    ? (
+                      <button className="btn btn-circle btn-primary">
+                        <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M959.488 920.32l-39.168 39.168a27.676444 27.676444 0 0 1-39.139556 0l-162.133333-162.133333a27.648 27.648 0 0 1 0-39.168l39.139556-39.139556a27.648 27.648 0 0 1 39.168 0l162.133333 162.104889c10.808889 10.837333 10.808889 28.359111 0 39.168zM169.358222 712.419556c-149.959111-149.959111-149.959111-393.102222 0-543.061334 149.959111-149.959111 393.073778-149.959111 543.061334 0 149.959111 149.959111 149.959111 393.102222 0 543.061334-149.987556 149.959111-393.102222 149.959111-543.061334 0zM631.324444 249.742222c-105.358222-105.386667-276.195556-105.386667-381.582222 0a269.824 269.824 0 0 0 0 381.610667A269.824 269.824 0 1 0 631.324444 249.742222z" fill="#ffffff"></path><path d="M959.488 920.32l-39.168 39.168a27.676444 27.676444 0 0 1-39.139556 0l-162.133333-162.133333a27.648 27.648 0 0 1 0-39.168l39.139556-39.139556a27.648 27.648 0 0 1 39.168 0l162.133333 162.104889c10.808889 10.837333 10.808889 28.359111 0 39.168zM169.358222 712.419556c-149.959111-149.959111-149.959111-393.102222 0-543.061334 149.959111-149.959111 393.073778-149.959111 543.061334 0 149.959111 149.959111 149.959111 393.102222 0 543.061334-149.987556 149.959111-393.102222 149.959111-543.061334 0zM631.324444 249.742222c-105.358222-105.386667-276.195556-105.386667-381.582222 0a269.824 269.824 0 0 0 0 381.610667A269.824 269.824 0 1 0 631.324444 249.742222z" fill="#ffffff"></path></svg>
+                      </button>
+                    ) : null
+                  }
+                  <button className="btn btn-circle btn-gray" onClick={this.handleCancel}>
+                    <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M597.333333 512l284.444445 284.444444c2.929778 3.328 2.929778 22.357333 0 28.444445l-56.888889 56.888889c-6.087111 2.929778-25.116444 2.929778-28.444445 0L512 597.333333 227.555556 881.777778c-3.328 2.929778-22.328889 2.929778-28.444445 0l-56.888889-56.888889c-2.929778-6.087111-2.929778-25.116444 0-28.444445l284.444445-284.444444L142.222222 227.555556c-2.929778-3.328-2.929778-22.328889 0-28.444445l56.888889-56.888889c6.115556-2.929778 25.116444-2.929778 28.444445 0l284.444444 284.444445L796.444444 142.222222c3.328-2.929778 22.357333-2.929778 28.444445 0l56.888889 56.888889c2.929778 6.115556 2.929778 25.116444 0 28.444445L597.333333 512z" fill="#4a4a4a"></path></svg>
+                  </button>
+                </div>
+              </Fragment>
+            ) : null
+          }
         </div>
       </div>
     );

src/components/UploadUnit/upload.css

@@ -0,0 +1,78 @@
+.upload-wrap {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.upload-unit {
+  width: calc(100%);
+  height: 200px;
+  min-width: 150px;
+  border: 2px dashed blue;
+  border-radius: 8px;
+  box-sizing: border-box;
+  transition: width .3s ease-out, height .3s ease-out, border .3s ease-out;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  overflow: hidden;
+}
+.upload-unit.open {
+  width: 200px;
+  border-width: 0;
+}
+.upload-unit > img {
+  margin-bottom: -200px;
+  height: 200px;
+  animation: fade-in .3s ease-out;
+  border-radius: 8px;
+}
+
+.upload-unit-mask {
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  transition: filter .3s ease-out;
+}
+.upload-unit-mask.hide {
+  filter: opacity(0);
+}
+
+.upload-unit-progress {
+  width: 50px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.progress-detail {
+  color: white;
+  font-size: 16px;
+  margin-top: 10px;
+}
+.progress-circle {
+  width: 50px;
+  height: 50px;
+}
+
+.upload-btns {
+  display: flex;
+  justify-content: center;
+  margin-top: -60px;
+  z-index: 1;
+}
+.upload-btns > button {
+  margin: 0 5px;
+}
+
+@keyframes fade-in {
+  from {
+    filter: opacity(0);
+  }
+  to {
+    filter: opacity(1);
+  }
+}