upload cancel.

src/common/model/matter/Matter.ts

@@ -1,4 +1,5 @@
-import {message} from "antd";
+import { message } from "antd";
+import axios, { CancelTokenSource } from "axios";
 import BaseEntity from "../base/BaseEntity";
 import Filter from "../base/filter/Filter";
 import HttpUtil from "../../util/HttpUtil";
@@ -52,6 +53,8 @@ export default class Matter extends BaseEntity {
   progress: number = 0;
   //实时上传速度 byte/s
   speed: number = 0;
+  //取消上传source
+  cancelSource: CancelTokenSource = axios.CancelToken.source();
 
   static URL_MATTER_CREATE_DIRECTORY = "/api/matter/create/directory";
   static URL_MATTER_SOFT_DELETE = "/api/matter/soft/delete";
@@ -121,7 +124,7 @@ export default class Matter extends BaseEntity {
       new InputFilter("分享uuid", "shareUuid"),
       new InputFilter("提取码", "shareCode"),
       new InputFilter("分享根目录", "shareRootUuid"),
-      new SortFilter('删除时间排序', 'orderDeleteTime'),
+      new SortFilter("删除时间排序", "orderDeleteTime"),
     ];
   }
 
@@ -194,7 +197,7 @@ export default class Matter extends BaseEntity {
     if (this.isImage()) {
       ImagePreviewer.showSinglePhoto(previewUrl);
     } else {
-      if(shareMode) {
+      if (shareMode) {
         PreviewerHelper.preview(this, previewUrl);
       } else {
         PreviewerHelper.preview(this);
@@ -208,7 +211,7 @@ export default class Matter extends BaseEntity {
     finallyCallback?: any
   ) {
     let that = this;
-    let form = {userUuid: that.userUuid, name: that.name, puuid: that.puuid};
+    let form = { userUuid: that.userUuid, name: that.name, puuid: that.puuid };
 
     return this.httpPost(
       Matter.URL_MATTER_CREATE_DIRECTORY,
@@ -225,7 +228,7 @@ export default class Matter extends BaseEntity {
   httpSoftDelete(successCallback?: any, errorCallback?: any) {
     this.httpPost(
       Matter.URL_MATTER_SOFT_DELETE,
-      {uuid: this.uuid},
+      { uuid: this.uuid },
       function (response: any) {
         typeof successCallback === "function" && successCallback(response);
       },
@@ -233,10 +236,14 @@ export default class Matter extends BaseEntity {
     );
   }
 
-  httpSoftDeleteBatch(uuids: string, successCallback?: any, errorCallback?: any) {
+  httpSoftDeleteBatch(
+    uuids: string,
+    successCallback?: any,
+    errorCallback?: any
+  ) {
     this.httpPost(
       Matter.URL_MATTER_SOFT_DELETE_BATCH,
-      {uuids: uuids},
+      { uuids: uuids },
       function (response: any) {
         typeof successCallback === "function" && successCallback(response);
       },
@@ -247,7 +254,7 @@ export default class Matter extends BaseEntity {
   httpDelete(successCallback?: any, errorCallback?: any) {
     this.httpPost(
       Matter.URL_MATTER_DELETE,
-      {uuid: this.uuid},
+      { uuid: this.uuid },
       function (response: any) {
         typeof successCallback === "function" && successCallback(response);
       },
@@ -258,7 +265,7 @@ export default class Matter extends BaseEntity {
   httpDeleteBatch(uuids: string, successCallback?: any, errorCallback?: any) {
     this.httpPost(
       Matter.URL_MATTER_DELETE_BATCH,
-      {uuids: uuids},
+      { uuids: uuids },
       function (response: any) {
         typeof successCallback === "function" && successCallback(response);
       },
@@ -269,7 +276,7 @@ export default class Matter extends BaseEntity {
   httpRecovery(successCallback?: any, errorCallback?: any) {
     this.httpPost(
       Matter.URL_MATTER_RECOVERY,
-      {uuid: this.uuid},
+      { uuid: this.uuid },
       function (response: any) {
         typeof successCallback === "function" && successCallback(response);
       },
@@ -280,7 +287,7 @@ export default class Matter extends BaseEntity {
   httpRecoveryBatch(uuids: string, successCallback?: any, errorCallback?: any) {
     this.httpPost(
       Matter.URL_MATTER_RECOVERY_BATCH,
-      {uuids: uuids},
+      { uuids: uuids },
       function (response: any) {
         typeof successCallback === "function" && successCallback(response);
       },
@@ -297,7 +304,7 @@ export default class Matter extends BaseEntity {
     let that = this;
     this.httpPost(
       Matter.URL_MATTER_RENAME,
-      {uuid: this.uuid, name: name},
+      { uuid: this.uuid, name: name },
       function (response: any) {
         that.assign(response.data.data);
         typeof successCallback === "function" && successCallback(response);
@@ -315,7 +322,7 @@ export default class Matter extends BaseEntity {
     let that = this;
     this.httpPost(
       Matter.URL_CHANGE_PRIVACY,
-      {uuid: this.uuid, privacy: privacy},
+      { uuid: this.uuid, privacy: privacy },
       function (response: any) {
         that.privacy = privacy;
         if (typeof successCallback === "function") {
@@ -335,7 +342,7 @@ export default class Matter extends BaseEntity {
     successCallback?: any,
     errorCallback?: any
   ) {
-    let form: any = {srcUuids: srcUuids};
+    let form: any = { srcUuids: srcUuids };
     if (destUuid) {
       form.destUuid = destUuid;
     } else {
@@ -495,6 +502,11 @@ export default class Matter extends BaseEntity {
         SafeUtil.safeCallback(successCallback)(response);
       },
       function (err: any) {
+        if (axios.isCancel(err)) {
+          that.clear();
+          SafeUtil.safeCallback(failureCallback)();
+          return;
+        }
         const response = err.response;
         that.errorMessage = response;
         that.clear();
@@ -524,10 +536,17 @@ export default class Matter extends BaseEntity {
           );
         }
         that.updateUI();
+      },
+      {
+        cancelToken: that.cancelSource.token,
       }
     );
   }
 
+  cancelUpload() {
+    this.cancelSource.cancel();
+  }
+
   //清除文件
   clear() {
     //filter,privacy不变

src/common/util/HttpUtil.ts

@@ -1,91 +1,82 @@
-import axios, {AxiosRequestConfig} from "axios";
+import axios, { AxiosRequestConfig } from "axios";
 import SafeUtil from "./SafeUtil";
 
-
 //http请求全部收口在这个工具类中，可以快速切换http框架。
 export default class HttpUtil {
-
-
-  static httpGet(url: any, params = {}, successCallback?: any, errorCallback?: any, finallyCallback?: any, opts?: any) {
-
+  static httpGet(
+    url: any,
+    params = {},
+    successCallback?: any,
+    errorCallback?: any,
+    finallyCallback?: any,
+    opts?: any
+  ) {
     axios
       .get(url, {
-        params: params
+        params: params,
       })
       .then(function (response) {
-        SafeUtil.safeCallback(successCallback)(response)
-
+        SafeUtil.safeCallback(successCallback)(response);
       })
       .catch(function (error) {
-
-        SafeUtil.safeCallback(errorCallback)(error)
-
+        SafeUtil.safeCallback(errorCallback)(error);
       })
       .finally(function () {
-
-        SafeUtil.safeCallback(finallyCallback)()
-
+        SafeUtil.safeCallback(finallyCallback)();
       });
   }
 
-
-  static httpPost(url: any, params = {}, successCallback?: any, errorCallback?: any, finallyCallback?: any, opts?: any) {
-
+  static httpPost(
+    url: any,
+    params = {},
+    successCallback?: any,
+    errorCallback?: any,
+    finallyCallback?: any,
+    opts?: any
+  ) {
     return axios
       .post(url, params, opts)
       .then(function (response) {
-
-        SafeUtil.safeCallback(successCallback)(response)
-
+        SafeUtil.safeCallback(successCallback)(response);
       })
       .catch(function (error) {
-
-        SafeUtil.safeCallback(errorCallback)(error)
-
+        SafeUtil.safeCallback(errorCallback)(error);
       })
       .finally(function () {
-
-        SafeUtil.safeCallback(finallyCallback)()
-
+        SafeUtil.safeCallback(finallyCallback)();
       });
   }
 
   /**
    * 上传文件的请求
    */
-  static httpPostFile(url: string,
-                      formData: FormData,
-                      successCallback?: any,
-                      errorCallback?: any,
-                      finallyCallback?: any,
-                      processCallback?: (progressEvent: any) => void,
-                      opts?: any) {
-
+  static httpPostFile(
+    url: string,
+    formData: FormData,
+    successCallback?: any,
+    errorCallback?: any,
+    finallyCallback?: any,
+    processCallback?: (progressEvent: any) => void,
+    opts?: any
+  ) {
     const config: AxiosRequestConfig = {
       headers: {
-        'Content-Type': 'multipart/form-data'
+        "Content-Type": "multipart/form-data",
       },
-      onUploadProgress: processCallback
-    }
+      cancelToken: opts ? opts.cancelToken : "",
+      onUploadProgress: processCallback,
+    };
 
     axios
       .post(url, formData, config)
       .then(function (response) {
-
-        SafeUtil.safeCallback(successCallback)(response)
-
+        SafeUtil.safeCallback(successCallback)(response);
       })
       .catch(function (error) {
-
-        SafeUtil.safeCallback(errorCallback)(error)
-
+        SafeUtil.safeCallback(errorCallback)(error);
       })
       .finally(function () {
-
-        SafeUtil.safeCallback(finallyCallback)()
-
+        SafeUtil.safeCallback(finallyCallback)();
       });
   }
-
 }
-

src/pages/matter/widget/UploadMatterPanel.less

@@ -13,6 +13,8 @@
     }
 
     .media {
+      display: flex;
+      justify-content: space-between;
       .media-body {
         cursor: pointer;
         color: #555;

src/pages/matter/widget/UploadMatterPanel.tsx

@@ -3,9 +3,9 @@ import TankComponent from "../../../common/component/TankComponent";
 import Matter from "../../../common/model/matter/Matter";
 import StringUtil from "../../../common/util/StringUtil";
 import { Progress } from "antd";
+import { CloseOutlined } from "@ant-design/icons";
 import "./UploadMatterPanel.less";
 import Lang from "../../../common/model/global/Lang";
-import {UserRole} from "../../../common/model/user/UserRole";
 
 interface IProps {
   matter: Matter;
@@ -23,19 +23,13 @@ export default class UploadMatterPanel extends TankComponent<IProps, IState> {
     return `${percent.toFixed(1)}%`;
   };
 
-
-
   componentDidMount() {
-
-    this.props.matter.reactComponent = this
+    this.props.matter.reactComponent = this;
   }
 
-  componentWillReceiveProps(nextProps: Readonly<IProps>, nextContext: any) {
-
-
-  }
+  componentWillReceiveProps(nextProps: Readonly<IProps>, nextContext: any) {}
   componentWillUnmount() {
-    this.props.matter.reactComponent = null
+    this.props.matter.reactComponent = null;
   }
 
   render() {
@@ -46,6 +40,9 @@ export default class UploadMatterPanel extends TankComponent<IProps, IState> {
           <div className="huge-block clearfix">
             <div className="media">
               <div className="media-body">{matter.file!.name}</div>
+              <div className="media-cancel">
+                <CloseOutlined onClick={() => matter.cancelUpload()} />
+              </div>
             </div>
             <Progress
               className="progress"