Merge remote-tracking branch 'remotes/origin/master' into develop

lib/App.module.css

@@ -1,30 +1,30 @@
-.comment {
-  width: 100%;
-  padding: 10px;
-  margin-bottom: 100px;
-}
-
-.comment .ant-spin-nested-loading > div > .ant-spin .ant-spin-dot {
-  position: fixed;
-  top: 45%;
-}
-
-.comment-header-tag {
-  border: 1px solid #cecece;
-  border-radius: 0;
-  color: #666;
-}
-
-.comment-header-tip {
-  color: #5198eb;
-  margin-right: 15px;
-  margin-left: 5px;
-}
-
-.comment-header-text {
-  color: #666;
-}
-
-.comment-img {
-  max-width: 100%;
-}
+.comment {
+  width: 100%;
+  padding: 10px;
+  margin-bottom: 100px;
+}
+
+.comment .ant-spin-nested-loading > div > .ant-spin .ant-spin-dot {
+  position: fixed;
+  top: 45%;
+}
+
+.comment-header-tag {
+  border: 1px solid #cecece;
+  border-radius: 0;
+  color: #666;
+}
+
+.comment-header-tip {
+  color: #5198eb;
+  margin-right: 15px;
+  margin-left: 5px;
+}
+
+.comment-header-text {
+  color: #666;
+}
+
+.comment-img {
+  max-width: 100%;
+}

lib/Comment.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Comment.js"],"names":["Comment","CommentContext","React","createContext","Component","props","app"],"mappings":";;;;;;;;;QAKgBA,O,GAAAA,O;;AALhB;;;;;;AAEA,IAAMC,iBAAiBC,gBAAMC,aAAN,EAAvB;;AAEA;AACO,SAASH,OAAT,CAAiBI,SAAjB,EAA4B;AACjC;AACA,SAAO,UAASC,KAAT,EAAgB;AACrB;AACA;AACA,WACE;AAAC,oBAAD,CAAgB,QAAhB;AAAA;AACG;AAAA,eAAO,8BAAC,SAAD,eAAeA,KAAf,IAAsB,KAAKC,GAA3B,IAAP;AAAA;AADH,KADF;AAKD,GARD;AASD;;QAEQL,c,GAAAA,c;kBAEMD,O","file":"Comment.js","sourcesContent":["import React from \"react\";\r\n\r\nconst CommentContext = React.createContext();\r\n\r\n// This function takes a component...\r\nexport function Comment(Component) {\r\n  // ...and returns another component...\r\n  return function(props) {\r\n    // ... and renders the wrapped component with the context theme!\r\n    // Notice that we pass through any additional props as well\r\n    return (\r\n      <CommentContext.Consumer>\r\n        {app => <Component {...props} app={app} />}\r\n      </CommentContext.Consumer>\r\n    );\r\n  };\r\n}\r\n\r\nexport { CommentContext };\r\n\r\nexport default Comment;\r\n"]}
+{"version":3,"sources":["../src/Comment.js"],"names":["Comment","CommentContext","React","createContext","Component","props","app"],"mappings":";;;;;;;;;QAKgBA,O,GAAAA,O;;AALhB;;;;;;AAEA,IAAMC,iBAAiBC,gBAAMC,aAAN,EAAvB;;AAEA;AACO,SAASH,OAAT,CAAiBI,SAAjB,EAA4B;AACjC;AACA,SAAO,UAASC,KAAT,EAAgB;AACrB;AACA;AACA,WACE;AAAC,oBAAD,CAAgB,QAAhB;AAAA;AACG;AAAA,eAAO,8BAAC,SAAD,eAAeA,KAAf,IAAsB,KAAKC,GAA3B,IAAP;AAAA;AADH,KADF;AAKD,GARD;AASD;;QAEQL,c,GAAAA,c;kBAEMD,O","file":"Comment.js","sourcesContent":["import React from \"react\";\n\nconst CommentContext = React.createContext();\n\n// This function takes a component...\nexport function Comment(Component) {\n  // ...and returns another component...\n  return function(props) {\n    // ... and renders the wrapped component with the context theme!\n    // Notice that we pass through any additional props as well\n    return (\n      <CommentContext.Consumer>\n        {app => <Component {...props} app={app} />}\n      </CommentContext.Consumer>\n    );\n  };\n}\n\nexport { CommentContext };\n\nexport default Comment;\n"]}

lib/axios.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/axios.js"],"names":["axios","defaults","withCredentials","headers","common"],"mappings":";;;;;;AAAA;;;;;;AAEAA,gBAAMC,QAAN,CAAeC,eAAf,GAAiC,IAAjC;AACAF,gBAAMC,QAAN,CAAeE,OAAf,CAAuBC,MAAvB,CAA8B,eAA9B,IAAiD,SAAjD;;kBAEeJ,e","file":"axios.js","sourcesContent":["import axios from \"axios\";\r\n\r\naxios.defaults.withCredentials = true;\r\naxios.defaults.headers.common[\"Authorization\"] = \"Bearer \";\r\n\r\nexport default axios;\r\n"]}
+{"version":3,"sources":["../src/axios.js"],"names":["axios","defaults","withCredentials","headers","common"],"mappings":";;;;;;AAAA;;;;;;AAEAA,gBAAMC,QAAN,CAAeC,eAAf,GAAiC,IAAjC;AACAF,gBAAMC,QAAN,CAAeE,OAAf,CAAuBC,MAAvB,CAA8B,eAA9B,IAAiD,SAAjD;;kBAEeJ,e","file":"axios.js","sourcesContent":["import axios from \"axios\";\n\naxios.defaults.withCredentials = true;\naxios.defaults.headers.common[\"Authorization\"] = \"Bearer \";\n\nexport default axios;\n"]}

lib/components/AudioPlayer/index.js

@@ -36,6 +36,14 @@ var _utc2 = _interopRequireDefault(_utc);
 
 require("./index.less");
 
+var _loading = require("../../assert/loading.gif");
+
+var _loading2 = _interopRequireDefault(_loading);
+
+var _btn_audio_play = require("../../assert/btn_audio_play.png");
+
+var _btn_audio_play2 = _interopRequireDefault(_btn_audio_play);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -58,7 +66,8 @@ var AudioPlayer = function (_React$Component) {
     _this.state = {
       duration: 0,
       currentDuration: 0,
-      isPlaying: false
+      isPlaying: false,
+      isLoading: false
     };
     return _this;
   }
@@ -78,10 +87,13 @@ var AudioPlayer = function (_React$Component) {
           return _this2.setState({ isPlaying: false, currentDuration: 0 });
         };
         this.player.onpause = function () {
-          return _this2.setState({ isPlaying: false });
+          return _this2.setState({ isPlaying: false, isLoading: false });
         };
         this.player.onplay = function () {
-          return _this2.setState({ isPlaying: true });
+          return _this2.setState({ isPlaying: false, isLoading: true });
+        };
+        this.player.onplaying = function () {
+          return _this2.setState({ isPlaying: true, isLoading: false });
         };
         this.player.ontimeupdate = function (event) {
           return _this2.setState({ currentDuration: event.target.currentTime });
@@ -102,10 +114,13 @@ var AudioPlayer = function (_React$Component) {
           return _this3.setState({ isPlaying: false, currentDuration: 0 });
         };
         this.player.onpause = function () {
-          return _this3.setState({ isPlaying: false });
+          return _this3.setState({ isPlaying: false, isLoading: false });
         };
         this.player.onplay = function () {
-          return _this3.setState({ isPlaying: true });
+          return _this3.setState({ isPlaying: false, isLoading: true });
+        };
+        this.player.onplaying = function () {
+          return _this3.setState({ isPlaying: true, isLoading: false });
         };
         this.player.ontimeupdate = function (event) {
           return _this3.setState({ currentDuration: event.target.currentTime });
@@ -134,15 +149,33 @@ var AudioPlayer = function (_React$Component) {
         this.player.play();
       }
     }
+  }, {
+    key: "getPlayIcon",
+    value: function getPlayIcon() {
+      var _state = this.state,
+          isPlaying = _state.isPlaying,
+          isLoading = _state.isLoading;
+
+      var playIconElem = void 0;
+
+      if (isLoading) {
+        playIconElem = _react2.default.createElement("img", { className: "icon-loading", src: _loading2.default, alt: "iconLoading" });
+      } else if (isPlaying) {
+        playIconElem = _react2.default.createElement(_icon2.default, { className: "pause", type: "pause" });
+      } else {
+        playIconElem = _react2.default.createElement("img", { className: "icon-loading", src: _btn_audio_play2.default, alt: "iconPlaying" });
+      }
+      return playIconElem;
+    }
   }, {
     key: "render",
     value: function render() {
       var _this4 = this;
 
-      var _state = this.state,
-          currentDuration = _state.currentDuration,
-          isPlaying = _state.isPlaying,
-          duration = _state.duration;
+      var _state2 = this.state,
+          currentDuration = _state2.currentDuration,
+          isPlaying = _state2.isPlaying,
+          duration = _state2.duration;
 
       return _react2.default.createElement(
         "div",
@@ -161,7 +194,7 @@ var AudioPlayer = function (_React$Component) {
               _this4.clickPlayOrPause(isPlaying);
             }
           },
-          isPlaying ? _react2.default.createElement(_icon2.default, { className: "pause", type: "pause" }) : _react2.default.createElement("i", { className: "schedule schedule-icon_image_audio" })
+          this.getPlayIcon()
         ),
         _react2.default.createElement(_slider2.default, {
           step: 0.001,

lib/components/AudioPlayer/index.less

@@ -19,6 +19,11 @@
     font-size: 14px;
   }
 
+  .icon-loading {
+    width: 100%;
+    height: 100%;
+  }
+
   .slider {
     margin: 0 0 0 16px;
     width: 195px;

lib/components/CommentBox/index.css

@@ -1,49 +1,49 @@
-.comment-show-more {
-  color: #4a90e2;
-  text-align: center;
-  width: 100px;
-  background-color: #f8f8f8;
-  cursor: pointer;
-  padding: 10px;
-  margin: 0 auto;
-  transition: all 0.3s;
-}
-.comment-show-more:hover {
-  background-color: #f5f5f5;
-  color: #1890ff;
-}
-.comment-more-box {
-  text-align: center;
-  width: 90%;
-  margin-left: 50px;
-  margin-top: 10px;
-  height: 40px;
-  display: inline-block;
-}
-@media screen and (max-width: 616px) and (min-width: 449px) {
-  .comment-more-box {
-    text-align: center;
-    width: 85%;
-    margin-left: 50px;
-    height: 40px;
-    display: inline-block;
-  }
-}
-@media screen and (max-width: 449px) and (min-width: 365px) {
-  .comment-more-box {
-    text-align: center;
-    width: 80%;
-    margin-left: 50px;
-    height: 40px;
-    display: inline-block;
-  }
-}
-@media screen and (max-width: 365px) {
-  .comment-more-box {
-    text-align: center;
-    width: 75%;
-    margin-left: 50px;
-    height: 40px;
-    display: inline-block;
-  }
-}
+.comment-show-more {
+  color: #4a90e2;
+  text-align: center;
+  width: 100px;
+  background-color: #f8f8f8;
+  cursor: pointer;
+  padding: 10px;
+  margin: 0 auto;
+  transition: all 0.3s;
+}
+.comment-show-more:hover {
+  background-color: #f5f5f5;
+  color: #1890ff;
+}
+.comment-more-box {
+  text-align: center;
+  width: 90%;
+  margin-left: 50px;
+  margin-top: 10px;
+  height: 40px;
+  display: inline-block;
+}
+@media screen and (max-width: 616px) and (min-width: 449px) {
+  .comment-more-box {
+    text-align: center;
+    width: 85%;
+    margin-left: 50px;
+    height: 40px;
+    display: inline-block;
+  }
+}
+@media screen and (max-width: 449px) and (min-width: 365px) {
+  .comment-more-box {
+    text-align: center;
+    width: 80%;
+    margin-left: 50px;
+    height: 40px;
+    display: inline-block;
+  }
+}
+@media screen and (max-width: 365px) {
+  .comment-more-box {
+    text-align: center;
+    width: 75%;
+    margin-left: 50px;
+    height: 40px;
+    display: inline-block;
+  }
+}

lib/components/Editor/Emoji.css

@@ -1,39 +1,39 @@
-.emoji .item {
-  float: left;
-  width: 40px;
-  height: 40px;
-  cursor: pointer;
-  white-space: nowrap;
-  /* this is required unless you put the helper span closely near the img */
-  text-align: center;
-  margin: 0;
-}
-
-.emoji .item .helper {
-  display: inline-block;
-  height: 100%;
-  vertical-align: middle;
-}
-
-.emoji .item img {
-  margin: 0 auto;
-  vertical-align: middle;
-  padding: 3px;
-}
-
-.emoji .item img:hover {
-  border: 1px solid #40a9ff;
-}
-
-.ant-carousel .slick-dots {
-  height: 5px;
-}
-
-.ant-carousel .slick-dots li button {
-  height: 5px;
-  width: 25px;
-}
-
-.ant-carousel .slick-dots li.slick-active button {
-  width: 32px;
-}
+.emoji .item {
+  float: left;
+  width: 40px;
+  height: 40px;
+  cursor: pointer;
+  white-space: nowrap;
+  /* this is required unless you put the helper span closely near the img */
+  text-align: center;
+  margin: 0;
+}
+
+.emoji .item .helper {
+  display: inline-block;
+  height: 100%;
+  vertical-align: middle;
+}
+
+.emoji .item img {
+  margin: 0 auto;
+  vertical-align: middle;
+  padding: 3px;
+}
+
+.emoji .item img:hover {
+  border: 1px solid #40a9ff;
+}
+
+.ant-carousel .slick-dots {
+  height: 5px;
+}
+
+.ant-carousel .slick-dots li button {
+  height: 5px;
+  width: 25px;
+}
+
+.ant-carousel .slick-dots li.slick-active button {
+  width: 32px;
+}

lib/components/Editor/Upload.js

@@ -40,14 +40,6 @@ var _react = require("react");
 
 var _react2 = _interopRequireDefault(_react);
 
-var _dayjs = require("dayjs");
-
-var _dayjs2 = _interopRequireDefault(_dayjs);
-
-var _shortid = require("shortid");
-
-var _shortid2 = _interopRequireDefault(_shortid);
-
 var _reactIntlUniversal = require("react-intl-universal");
 
 var _reactIntlUniversal2 = _interopRequireDefault(_reactIntlUniversal);
@@ -68,31 +60,6 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
 
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
-var client = function client(oss) {
-  return new window.OSS.Wrapper({
-    accessKeyId: oss.access_key_id,
-    accessKeySecret: oss.access_key_secret,
-    stsToken: oss.security_token,
-    endpoint: _constant.OSS_ENDPOINT, //常量,你可以自己定义
-    bucket: _constant.OSS_BUCKET
-  });
-};
-
-var uploadPath = function uploadPath(path, file) {
-  return path + "/" + (0, _dayjs2.default)().format("YYYYMMDD") + "/" + _shortid2.default.generate() + "." + file.type.split("/")[1];
-};
-
-var UploadToOss = function UploadToOss(oss, path, file) {
-  var url = uploadPath(path, file);
-  return new Promise(function (resolve, reject) {
-    client(oss).multipartUpload(url, file).then(function (data) {
-      resolve(data);
-    }).catch(function (error) {
-      reject(error);
-    });
-  });
-};
-
 var App = function (_React$Component) {
   _inherits(App, _React$Component);
 
@@ -163,7 +130,7 @@ var App = function (_React$Component) {
       reader.onloadend = function () {
         info.onProgress({ percent: 20 });
         // DRIVER_LICENSE_PATH oss 的存储路径位置
-        UploadToOss(_this2.props.app.oss, _constant.DRIVER_LICENSE_PATH, file).then(function (data) {
+        _this2.props.app.UploadToOss(_this2.props.app.oss, _constant.DRIVER_LICENSE_PATH, file).then(function (data) {
           info.onProgress({ percent: 100 });
           info.onSuccess(data);
           _this2.props.onUpload({ path: data.name, uid: file.uid });

lib/components/Editor/index.js

@@ -36,14 +36,6 @@ require("antd/es/message/style");
 
 require("antd/es/input/style");
 
-var _dayjs = require("dayjs");
-
-var _dayjs2 = _interopRequireDefault(_dayjs);
-
-var _shortid = require("shortid");
-
-var _shortid2 = _interopRequireDefault(_shortid);
-
 var _propTypes = require("prop-types");
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
@@ -90,32 +82,6 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 
 var TextArea = _input2.default.TextArea;
 
-
-var client = function client(oss) {
-  return new window.OSS.Wrapper({
-    accessKeyId: oss.access_key_id,
-    accessKeySecret: oss.access_key_secret,
-    stsToken: oss.security_token,
-    endpoint: _constant.OSS_ENDPOINT, //常量,你可以自己定义
-    bucket: _constant.OSS_BUCKET
-  });
-};
-
-var uploadPath = function uploadPath(path, file) {
-  return path + "/" + (0, _dayjs2.default)().format("YYYYMMDD") + "/" + _shortid2.default.generate() + "." + file.type.split("/")[1];
-};
-
-var UploadToOss = function UploadToOss(oss, path, file) {
-  var url = uploadPath(path, file);
-  return new Promise(function (resolve, reject) {
-    client(oss).multipartUpload(url, file).then(function (data) {
-      resolve(data);
-    }).catch(function (error) {
-      reject(error);
-    });
-  });
-};
-
 var Editor = function (_React$Component) {
   _inherits(Editor, _React$Component);
 
@@ -313,7 +279,7 @@ var Editor = function (_React$Component) {
       reader.readAsDataURL(file);
       reader.onloadend = function () {
         // DRIVER_LICENSE_PATH oss 的存储路径位置
-        UploadToOss(_this2.props.app.oss, _constant.DRIVER_LICENSE_PATH, file).then(function (data) {
+        _this2.props.app.UploadToOss(_this2.props.app.oss, _constant.DRIVER_LICENSE_PATH, file).then(function (data) {
           var fileList = _this2.state.fileList.concat({
             url: _constant.OSS_LINK + data.name,
             thumbUrl: _constant.OSS_LINK + data.name,

lib/components/ImagePreviewer/ImagePreviewer.css

@@ -1,112 +1,112 @@
-.container .toolbar {
-  border-bottom: 1px solid #f2f2f2;
-  margin: 0 5px;
-  padding-bottom: 10px;
-}
-.container .toolbar .button {
-  padding: 5px 10px;
-  cursor: pointer;
-}
-.container .toolbar .button.reversal i {
-  transform: rotate3d(0, 1, 0, 180deg);
-}
-.container .pictureWrapper {
-  position: relative;
-  text-align: center;
-  margin-top: 15px;
-  padding: 0 5px;
-}
-.container .pictureWrapper .tools {
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  right: 0;
-}
-.container .pictureWrapper .tools .item {
-  width: 33%;
-  display: inline-block;
-  height: 100%;
-}
-.container .pictureWrapper .tools .item.left {
-  cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/73_yM_fx-.undefined"),
-    auto;
-}
-.container .pictureWrapper .tools .item.shrink {
-  cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/oGPpbJ7Rk.undefined"),
-    auto;
-}
-.container .pictureWrapper .tools .item.right {
-  cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/S8obecP1d.undefined"),
-    auto;
-}
-.container .pictureWrapper .picture {
-  max-width: 100%;
-  max-height: 400px;
-}
-.container .pictureWrapper .prev {
-  position: absolute;
-  width: 50px;
-  background-color: transparent;
-  z-index: 100;
-  opacity: 0.5;
-  font-size: 50px;
-  text-align: left;
-  cursor: pointer;
-  left: 5px;
-  top: 0;
-  bottom: 0;
-}
-.container .pictureWrapper .prev:hover {
-  background-color: #fff;
-}
-.container .pictureWrapper .next {
-  position: absolute;
-  width: 50px;
-  background-color: transparent;
-  z-index: 100;
-  opacity: 0.5;
-  font-size: 50px;
-  text-align: left;
-  cursor: pointer;
-  right: 5px;
-  top: 0;
-  bottom: 0;
-}
-.container .pictureWrapper .next:hover {
-  background-color: #fff;
-}
-.container .pictureWrapper .middle {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-}
-.container .list {
-  font-size: 0;
-  margin-top: 25px;
-}
-.container .list .wrapper {
-  width: 11.1%;
-  height: 0;
-  padding-bottom: 11.1%;
-  position: relative;
-  display: inline-block;
-  border-radius: 5px;
-  border: 1px solid transparent;
-  opacity: 0.5;
-}
-.container .list .wrapper.active {
-  border: 1px solid #fc4747;
-  opacity: 1;
-}
-.container .list .wrapper .thumbnail {
-  position: absolute;
-  top: 5px;
-  bottom: 5px;
-  left: 5px;
-  right: 5px;
-  background-size: cover;
-  background-position: center;
-  border-radius: 5px;
-  cursor: pointer;
-}
+.container .toolbar {
+  border-bottom: 1px solid #f2f2f2;
+  margin: 0 5px;
+  padding-bottom: 10px;
+}
+.container .toolbar .button {
+  padding: 5px 10px;
+  cursor: pointer;
+}
+.container .toolbar .button.reversal i {
+  transform: rotate3d(0, 1, 0, 180deg);
+}
+.container .pictureWrapper {
+  position: relative;
+  text-align: center;
+  margin-top: 15px;
+  padding: 0 5px;
+}
+.container .pictureWrapper .tools {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+}
+.container .pictureWrapper .tools .item {
+  width: 33%;
+  display: inline-block;
+  height: 100%;
+}
+.container .pictureWrapper .tools .item.left {
+  cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/73_yM_fx-.undefined"),
+    auto;
+}
+.container .pictureWrapper .tools .item.shrink {
+  cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/oGPpbJ7Rk.undefined"),
+    auto;
+}
+.container .pictureWrapper .tools .item.right {
+  cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/S8obecP1d.undefined"),
+    auto;
+}
+.container .pictureWrapper .picture {
+  max-width: 100%;
+  max-height: 400px;
+}
+.container .pictureWrapper .prev {
+  position: absolute;
+  width: 50px;
+  background-color: transparent;
+  z-index: 100;
+  opacity: 0.5;
+  font-size: 50px;
+  text-align: left;
+  cursor: pointer;
+  left: 5px;
+  top: 0;
+  bottom: 0;
+}
+.container .pictureWrapper .prev:hover {
+  background-color: #fff;
+}
+.container .pictureWrapper .next {
+  position: absolute;
+  width: 50px;
+  background-color: transparent;
+  z-index: 100;
+  opacity: 0.5;
+  font-size: 50px;
+  text-align: left;
+  cursor: pointer;
+  right: 5px;
+  top: 0;
+  bottom: 0;
+}
+.container .pictureWrapper .next:hover {
+  background-color: #fff;
+}
+.container .pictureWrapper .middle {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.container .list {
+  font-size: 0;
+  margin-top: 25px;
+}
+.container .list .wrapper {
+  width: 11.1%;
+  height: 0;
+  padding-bottom: 11.1%;
+  position: relative;
+  display: inline-block;
+  border-radius: 5px;
+  border: 1px solid transparent;
+  opacity: 0.5;
+}
+.container .list .wrapper.active {
+  border: 1px solid #fc4747;
+  opacity: 1;
+}
+.container .list .wrapper .thumbnail {
+  position: absolute;
+  top: 5px;
+  bottom: 5px;
+  left: 5px;
+  right: 5px;
+  background-size: cover;
+  background-position: center;
+  border-radius: 5px;
+  cursor: pointer;
+}

lib/components/ImagePreviewer/ImagePreviewer.less

@@ -1,117 +1,117 @@
-.comment-image-preview-container {
-  .toolbar {
-    border-bottom: 1px solid #f2f2f2;
-    margin: 0 5px;
-    padding-bottom: 10px;
-    .button {
-      padding: 5px 10px;
-      cursor: pointer;
-      &.reversal i {
-        transform: rotate3d(0, 1, 0, 180deg);
-      }
-    }
-  }
-  .pictureWrapper {
-    position: relative; // width: 100%;
-    // padding-bottom: 68%;
-    // height: 0;
-    text-align: center;
-    margin-top: 15px;
-    padding: 0 5px;
-    .tools {
-      position: absolute;
-      left: 0;
-      top: 0;
-      bottom: 0;
-      right: 0;
-      .item {
-        width: 33%;
-        display: inline-block;
-        height: 100%;
-        &.left {
-          cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/73_yM_fx-.undefined"),
-            auto;
-        }
-        &.shrink {
-          cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/oGPpbJ7Rk.undefined"),
-            auto;
-        }
-        &.right {
-          cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/S8obecP1d.undefined"),
-            auto;
-        }
-      }
-    }
-    .picture {
-      max-width: 100%;
-      max-height: 400px;
-    }
-    .tool() {
-      position: absolute;
-      width: 50px;
-      background-color: transparent;
-      z-index: 100;
-      opacity: 0.5;
-      font-size: 50px;
-      text-align: left;
-      cursor: pointer;
-      &:hover {
-        background-color: #fff;
-      }
-    }
-    .prev {
-      .tool();
-      left: 5px;
-      top: 0;
-      bottom: 0;
-    }
-    .next {
-      .tool();
-      right: 5px;
-      top: 0;
-      bottom: 0;
-    }
-    .middle {
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-    } // .picture {
-    //     position: absolute;
-    //     bottom: 0;
-    //     top: 0;
-    //     left: 5px;
-    //     right: 5px;
-    //     background-size: contain;
-    //     background-position: center;
-    // }
-  }
-  .list {
-    font-size: 0;
-    margin-top: 25px;
-    .wrapper {
-      width: 11.1%;
-      height: 0;
-      padding-bottom: 11.1%;
-      position: relative;
-      display: inline-block;
-      border-radius: 5px;
-      border: 1px solid transparent;
-      opacity: 0.5;
-      &.active {
-        border: 1px solid #fc4747;
-        opacity: 1;
-      }
-      .thumbnail {
-        position: absolute;
-        top: 5px;
-        bottom: 5px;
-        left: 5px;
-        right: 5px;
-        background-size: cover;
-        background-position: center;
-        border-radius: 5px;
-        cursor: pointer;
-      }
-    }
-  }
-}
+.comment-image-preview-container {
+  .toolbar {
+    border-bottom: 1px solid #f2f2f2;
+    margin: 0 5px;
+    padding-bottom: 10px;
+    .button {
+      padding: 5px 10px;
+      cursor: pointer;
+      &.reversal i {
+        transform: rotate3d(0, 1, 0, 180deg);
+      }
+    }
+  }
+  .pictureWrapper {
+    position: relative; // width: 100%;
+    // padding-bottom: 68%;
+    // height: 0;
+    text-align: center;
+    margin-top: 15px;
+    padding: 0 5px;
+    .tools {
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      right: 0;
+      .item {
+        width: 33%;
+        display: inline-block;
+        height: 100%;
+        &.left {
+          cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/73_yM_fx-.undefined"),
+            auto;
+        }
+        &.shrink {
+          cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/oGPpbJ7Rk.undefined"),
+            auto;
+        }
+        &.right {
+          cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/S8obecP1d.undefined"),
+            auto;
+        }
+      }
+    }
+    .picture {
+      max-width: 100%;
+      max-height: 400px;
+    }
+    .tool() {
+      position: absolute;
+      width: 50px;
+      background-color: transparent;
+      z-index: 100;
+      opacity: 0.5;
+      font-size: 50px;
+      text-align: left;
+      cursor: pointer;
+      &:hover {
+        background-color: #fff;
+      }
+    }
+    .prev {
+      .tool();
+      left: 5px;
+      top: 0;
+      bottom: 0;
+    }
+    .next {
+      .tool();
+      right: 5px;
+      top: 0;
+      bottom: 0;
+    }
+    .middle {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+    } // .picture {
+    //     position: absolute;
+    //     bottom: 0;
+    //     top: 0;
+    //     left: 5px;
+    //     right: 5px;
+    //     background-size: contain;
+    //     background-position: center;
+    // }
+  }
+  .list {
+    font-size: 0;
+    margin-top: 25px;
+    .wrapper {
+      width: 11.1%;
+      height: 0;
+      padding-bottom: 11.1%;
+      position: relative;
+      display: inline-block;
+      border-radius: 5px;
+      border: 1px solid transparent;
+      opacity: 0.5;
+      &.active {
+        border: 1px solid #fc4747;
+        opacity: 1;
+      }
+      .thumbnail {
+        position: absolute;
+        top: 5px;
+        bottom: 5px;
+        left: 5px;
+        right: 5px;
+        background-size: cover;
+        background-position: center;
+        border-radius: 5px;
+        cursor: pointer;
+      }
+    }
+  }
+}

lib/components/ImagePreviewer/README.md

@@ -1,4 +1,4 @@
-+ big //links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/QPI84fxmD.undefined
-+ small //links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/oGPpbJ7Rk.undefined
-+ prev //links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/73_yM_fx-.undefined
++ big //links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/QPI84fxmD.undefined
++ small //links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/oGPpbJ7Rk.undefined
++ prev //links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/73_yM_fx-.undefined
 + next //links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/S8obecP1d.undefined

lib/components/RenderText/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/RenderText/index.js"],"names":["App","__html","text"],"mappings":";;;;;;AAAA;;;;AACA;;;;AAEA,IAAMA,MAAM,SAANA,GAAM;AAAA,SACV;AACE,eAAU,sBADZ;AAEE,6BAAyB;AACvBC,cAAQ,2BAAcC,IAAd;AADe;AAF3B,IADU;AAAA,CAAZ;;kBASeF,G","file":"index.js","sourcesContent":["import React from \"react\";\r\nimport { renderContent } from \"../../helper\";\r\n\r\nconst App = text => (\r\n  <div\r\n    className=\"comment-item-content\"\r\n    dangerouslySetInnerHTML={{\r\n      __html: renderContent(text)\r\n    }}\r\n  />\r\n);\r\n\r\nexport default App;\r\n"]}
+{"version":3,"sources":["../../../src/components/RenderText/index.js"],"names":["App","__html","text"],"mappings":";;;;;;AAAA;;;;AACA;;;;AAEA,IAAMA,MAAM,SAANA,GAAM;AAAA,SACV;AACE,eAAU,sBADZ;AAEE,6BAAyB;AACvBC,cAAQ,2BAAcC,IAAd;AADe;AAF3B,IADU;AAAA,CAAZ;;kBASeF,G","file":"index.js","sourcesContent":["import React from \"react\";\nimport { renderContent } from \"../../helper\";\n\nconst App = text => (\n  <div\n    className=\"comment-item-content\"\n    dangerouslySetInnerHTML={{\n      __html: renderContent(text)\n    }}\n  />\n);\n\nexport default App;\n"]}

lib/constant.js

@@ -7,8 +7,6 @@ var ERROR_DEFAULT = exports.ERROR_DEFAULT = "出错了！";
 
 var LIMIT = exports.LIMIT = 10; // 默认 limit
 
-var OSS_ENDPOINT = exports.OSS_ENDPOINT = "oss-cn-beijing.aliyuncs.com";
-var OSS_BUCKET = exports.OSS_BUCKET = "links-comment";
 var DRIVER_LICENSE_PATH = exports.DRIVER_LICENSE_PATH = "/comment";
 
 var OSS_LINK = exports.OSS_LINK = "//links-comment.oss-cn-beijing.aliyuncs.com";

lib/constant.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/constant.js"],"names":["ERROR_DEFAULT","LIMIT","OSS_ENDPOINT","OSS_BUCKET","DRIVER_LICENSE_PATH","OSS_LINK","MAX_UPLOAD_NUMBER","URL_REGEXP","REGEXP","AVATAR","IMAGE_SPLIT","IMAGE_PROCESS","IMAGE_PROCESS_SMALL","IMAGE_PROCESS_LARGE","COMMENT_TYPE","COMMENT","REPLY","LANGUAGE_LINK","process","env","NODE_ENV"],"mappings":";;;;;AAAO,IAAMA,wCAAgB,MAAtB;;AAEA,IAAMC,wBAAQ,EAAd,C,CAAkB;;AAElB,IAAMC,sCAAe,6BAArB;AACA,IAAMC,kCAAa,eAAnB;AACA,IAAMC,oDAAsB,UAA5B;;AAEA,IAAMC,8BAAW,6CAAjB;;AAEA,IAAMC,gDAAoB,CAA1B;;AAEA,IAAMC,kCAAa,oGAAnB;;AAEA,IAAMC,0BAAS,eAAf;;AAEA,IAAMC,0BAAS,EAAf;;AAEA,IAAMC,oCAAc,aAApB;;AAEA,IAAMC,wCAAgB,mCAAtB;AACA,IAAMC,oDAAsB,mCAA5B;AACA,IAAMC,oDAAsB,mCAA5B;;AAEA,IAAMC,sCAAe;AAC1BC,WAAS,SADiB;AAE1BC,SAAO;AAFmB,CAArB;;AAKP;AACO,IAAMC,wCACXC,QAAQC,GAAR,CAAYC,QAAZ,KAAyB,YAAzB,GACI,sBADJ,GAEI,uBAHC","file":"constant.js","sourcesContent":["export const ERROR_DEFAULT = \"出错了！\";\n\nexport const LIMIT = 10; // 默认 limit\n\nexport const OSS_ENDPOINT = \"oss-cn-beijing.aliyuncs.com\";\nexport const OSS_BUCKET = \"links-comment\";\nexport const DRIVER_LICENSE_PATH = \"/comment\";\n\nexport const OSS_LINK = \"//links-comment.oss-cn-beijing.aliyuncs.com\";\n\nexport const MAX_UPLOAD_NUMBER = 4;\n\nexport const URL_REGEXP = /((http(s)?:)?\\/\\/)?(www\\.)?[-a-zA-Z0-9@:%._+~#=]{2,256}\\.[a-z]{2,6}\\b([-a-zA-Z0-9@:%_+.~#?&//=]*)/g;\n\nexport const REGEXP = /\\[[^[\\]]+?\\]/g;\n\nexport const AVATAR = \"\";\n\nexport const IMAGE_SPLIT = \"IMAGE_SPLIT\";\n\nexport const IMAGE_PROCESS = \"?x-oss-process=image/resize,h_350\";\nexport const IMAGE_PROCESS_SMALL = \"?x-oss-process=image/resize,h_100\";\nexport const IMAGE_PROCESS_LARGE = \"?x-oss-process=image/resize,h_500\";\n\nexport const COMMENT_TYPE = {\n  COMMENT: \"comment\",\n  REPLY: \"reply\"\n};\n\n// 线上静态库地址\nexport const LANGUAGE_LINK =\n  process.env.NODE_ENV === \"production\"\n    ? \"//a.links123.cn/lang\"\n    : \"//a.links123.net/lang\";\n"]}
+{"version":3,"sources":["../src/constant.js"],"names":["ERROR_DEFAULT","LIMIT","DRIVER_LICENSE_PATH","OSS_LINK","MAX_UPLOAD_NUMBER","URL_REGEXP","REGEXP","AVATAR","IMAGE_SPLIT","IMAGE_PROCESS","IMAGE_PROCESS_SMALL","IMAGE_PROCESS_LARGE","COMMENT_TYPE","COMMENT","REPLY","LANGUAGE_LINK","process","env","NODE_ENV"],"mappings":";;;;;AAAO,IAAMA,wCAAgB,MAAtB;;AAEA,IAAMC,wBAAQ,EAAd,C,CAAkB;;AAElB,IAAMC,oDAAsB,UAA5B;;AAEA,IAAMC,8BAAW,6CAAjB;;AAEA,IAAMC,gDAAoB,CAA1B;;AAEA,IAAMC,kCAAa,oGAAnB;;AAEA,IAAMC,0BAAS,eAAf;;AAEA,IAAMC,0BAAS,EAAf;;AAEA,IAAMC,oCAAc,aAApB;;AAEA,IAAMC,wCAAgB,mCAAtB;AACA,IAAMC,oDAAsB,mCAA5B;AACA,IAAMC,oDAAsB,mCAA5B;;AAEA,IAAMC,sCAAe;AAC1BC,WAAS,SADiB;AAE1BC,SAAO;AAFmB,CAArB;;AAKP;AACO,IAAMC,wCACXC,QAAQC,GAAR,CAAYC,QAAZ,KAAyB,YAAzB,GACI,sBADJ,GAEI,uBAHC","file":"constant.js","sourcesContent":["export const ERROR_DEFAULT = \"出错了！\";\n\nexport const LIMIT = 10; // 默认 limit\n\nexport const DRIVER_LICENSE_PATH = \"/comment\";\n\nexport const OSS_LINK = \"//links-comment.oss-cn-beijing.aliyuncs.com\";\n\nexport const MAX_UPLOAD_NUMBER = 4;\n\nexport const URL_REGEXP = /((http(s)?:)?\\/\\/)?(www\\.)?[-a-zA-Z0-9@:%._+~#=]{2,256}\\.[a-z]{2,6}\\b([-a-zA-Z0-9@:%_+.~#?&//=]*)/g;\n\nexport const REGEXP = /\\[[^[\\]]+?\\]/g;\n\nexport const AVATAR = \"\";\n\nexport const IMAGE_SPLIT = \"IMAGE_SPLIT\";\n\nexport const IMAGE_PROCESS = \"?x-oss-process=image/resize,h_350\";\nexport const IMAGE_PROCESS_SMALL = \"?x-oss-process=image/resize,h_100\";\nexport const IMAGE_PROCESS_LARGE = \"?x-oss-process=image/resize,h_500\";\n\nexport const COMMENT_TYPE = {\n  COMMENT: \"comment\",\n  REPLY: \"reply\"\n};\n\n// 线上静态库地址\nexport const LANGUAGE_LINK =\n  process.env.NODE_ENV === \"production\"\n    ? \"//a.links123.cn/lang\"\n    : \"//a.links123.net/lang\";\n"]}

lib/version.json

@@ -1,8 +1,8 @@
 {
     "name":       "comment",
-    "buildDate":  1588149501351,
+    "buildDate":  1594135597777,
     "version":    "1.0.4",
-    "numCommits": 211,
-    "hash":       "7a67067",
-    "dirty":      true
+    "numCommits": 217,
+    "hash":       "e6f4c20",
+    "dirty":      false
 }

package.json

@@ -23,7 +23,6 @@
     "react-dom": "^16.4.1",
     "react-intl-universal": "^1.15.2",
     "react-scripts": "1.1.4",
-    "shortid": "^2.2.11",
     "webpack-version-file-plugin": "^0.3.3"
   },
   "lint-staged": {
@@ -42,13 +41,13 @@
     "lib": "babel ./src --out-dir ./lib --source-maps --copy-files"
   },
   "devDependencies": {
-    "cross-env": "^5.2.0",
     "babel-cli": "^6.26.0",
     "babel-plugin-import": "^1.8.0",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-env": "^1.7.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
+    "cross-env": "^5.2.0",
     "husky": "^0.14.3",
     "lint-staged": "^7.2.0",
     "node-sass": "^4.9.4",

src/components/AudioPlayer/index.js

@@ -4,6 +4,8 @@ import dayjs from "dayjs";
 import durationPlugin from "dayjs/plugin/duration";
 import utcPlugin from "dayjs/plugin/utc";
 import "./index.less";
+import iconLoading from "../../assert/loading.gif";
+import btnAudioPlay from "../../assert/btn_audio_play.png";
 
 dayjs.extend(durationPlugin);
 dayjs.extend(utcPlugin);
@@ -14,7 +16,8 @@ class AudioPlayer extends React.Component {
     this.state = {
       duration: 0,
       currentDuration: 0,
-      isPlaying: false
+      isPlaying: false,
+      isLoading: false
     };
   }
 
@@ -25,8 +28,12 @@ class AudioPlayer extends React.Component {
         this.setState({ duration: event.target.duration });
       this.player.onended = () =>
         this.setState({ isPlaying: false, currentDuration: 0 });
-      this.player.onpause = () => this.setState({ isPlaying: false });
-      this.player.onplay = () => this.setState({ isPlaying: true });
+      this.player.onpause = () =>
+        this.setState({ isPlaying: false, isLoading: false });
+      this.player.onplay = () =>
+        this.setState({ isPlaying: false, isLoading: true });
+      this.player.onplaying = () =>
+        this.setState({ isPlaying: true, isLoading: false });
       this.player.ontimeupdate = event =>
         this.setState({ currentDuration: event.target.currentTime });
       this.player.src = src;
@@ -39,8 +46,12 @@ class AudioPlayer extends React.Component {
         this.setState({ duration: event.target.duration });
       this.player.onended = () =>
         this.setState({ isPlaying: false, currentDuration: 0 });
-      this.player.onpause = () => this.setState({ isPlaying: false });
-      this.player.onplay = () => this.setState({ isPlaying: true });
+      this.player.onpause = () =>
+        this.setState({ isPlaying: false, isLoading: false });
+      this.player.onplay = () =>
+        this.setState({ isPlaying: false, isLoading: true });
+      this.player.onplaying = () =>
+        this.setState({ isPlaying: true, isLoading: false });
       this.player.ontimeupdate = event =>
         this.setState({ currentDuration: event.target.currentTime });
       this.player.src = this.props.src;
@@ -67,6 +78,24 @@ class AudioPlayer extends React.Component {
     }
   }
 
+  getPlayIcon() {
+    const { isPlaying, isLoading } = this.state;
+    let playIconElem;
+
+    if (isLoading) {
+      playIconElem = (
+        <img className="icon-loading" src={iconLoading} alt="iconLoading" />
+      );
+    } else if (isPlaying) {
+      playIconElem = <Icon className="pause" type="pause" />;
+    } else {
+      playIconElem = (
+        <img className="icon-loading" src={btnAudioPlay} alt="iconPlaying" />
+      );
+    }
+    return playIconElem;
+  }
+
   render() {
     const { currentDuration, isPlaying, duration } = this.state;
     return (
@@ -84,11 +113,7 @@ class AudioPlayer extends React.Component {
             this.clickPlayOrPause(isPlaying);
           }}
         >
-          {isPlaying ? (
-            <Icon className="pause" type="pause" />
-          ) : (
-            <i className="schedule schedule-icon_image_audio" />
-          )}
+          {this.getPlayIcon()}
         </span>
         <Slider
           step={0.001}

src/components/AudioPlayer/index.less

@@ -19,6 +19,11 @@
     font-size: 14px;
   }
 
+  .icon-loading {
+    width: 100%;
+    height: 100%;
+  }
+
   .slider {
     margin: 0 0 0 16px;
     width: 195px;

src/components/Editor/Upload.js

@@ -1,47 +1,10 @@
 import React from "react";
 import { Upload, Icon, Modal, message, Spin } from "antd";
-import dayjs from "dayjs";
-import shortid from "shortid";
 import intl from "react-intl-universal";
-import {
-  OSS_ENDPOINT,
-  OSS_BUCKET,
-  DRIVER_LICENSE_PATH,
-  ERROR_DEFAULT
-} from "../../constant";
+import { DRIVER_LICENSE_PATH, ERROR_DEFAULT } from "../../constant";
 import Comment from "../../Comment";
 import "./Upload.css";
 
-const client = oss => {
-  return new window.OSS.Wrapper({
-    accessKeyId: oss.access_key_id,
-    accessKeySecret: oss.access_key_secret,
-    stsToken: oss.security_token,
-    endpoint: OSS_ENDPOINT, //常量,你可以自己定义
-    bucket: OSS_BUCKET
-  });
-};
-
-const uploadPath = (path, file) => {
-  return `${path}/${dayjs().format("YYYYMMDD")}/${shortid.generate()}.${
-    file.type.split("/")[1]
-  }`;
-};
-
-const UploadToOss = (oss, path, file) => {
-  const url = uploadPath(path, file);
-  return new Promise((resolve, reject) => {
-    client(oss)
-      .multipartUpload(url, file)
-      .then(data => {
-        resolve(data);
-      })
-      .catch(error => {
-        reject(error);
-      });
-  });
-};
-
 class App extends React.Component {
   constructor(props) {
     super(props);
@@ -94,7 +57,8 @@ class App extends React.Component {
     reader.onloadend = () => {
       info.onProgress({ percent: 20 });
       // DRIVER_LICENSE_PATH oss 的存储路径位置
-      UploadToOss(this.props.app.oss, DRIVER_LICENSE_PATH, file)
+      this.props.app
+        .UploadToOss(this.props.app.oss, DRIVER_LICENSE_PATH, file)
         .then(data => {
           info.onProgress({ percent: 100 });
           info.onSuccess(data);

src/components/Editor/index.js

@@ -1,5 +1,3 @@
-import dayjs from "dayjs";
-import shortid from "shortid";
 import PropTypes from "prop-types";
 import classnames from "classnames";
 import React, { Fragment } from "react";
@@ -11,46 +9,11 @@ import Comment from "../../Comment";
 import { isMobile } from "./../../utils";
 import { OSS_LINK } from "../../constant";
 import { isFunction } from "../../helper";
-import {
-  OSS_ENDPOINT,
-  OSS_BUCKET,
-  DRIVER_LICENSE_PATH,
-  ERROR_DEFAULT
-} from "../../constant";
+import { DRIVER_LICENSE_PATH, ERROR_DEFAULT } from "../../constant";
 import "./index.css";
 
 const { TextArea } = Input;
 
-const client = oss => {
-  return new window.OSS.Wrapper({
-    accessKeyId: oss.access_key_id,
-    accessKeySecret: oss.access_key_secret,
-    stsToken: oss.security_token,
-    endpoint: OSS_ENDPOINT, //常量,你可以自己定义
-    bucket: OSS_BUCKET
-  });
-};
-
-const uploadPath = (path, file) => {
-  return `${path}/${dayjs().format("YYYYMMDD")}/${shortid.generate()}.${
-    file.type.split("/")[1]
-  }`;
-};
-
-const UploadToOss = (oss, path, file) => {
-  const url = uploadPath(path, file);
-  return new Promise((resolve, reject) => {
-    client(oss)
-      .multipartUpload(url, file)
-      .then(data => {
-        resolve(data);
-      })
-      .catch(error => {
-        reject(error);
-      });
-  });
-};
-
 class Editor extends React.Component {
   constructor(props) {
     super(props);
@@ -214,7 +177,8 @@ class Editor extends React.Component {
     reader.readAsDataURL(file);
     reader.onloadend = () => {
       // DRIVER_LICENSE_PATH oss 的存储路径位置
-      UploadToOss(this.props.app.oss, DRIVER_LICENSE_PATH, file)
+      this.props.app
+        .UploadToOss(this.props.app.oss, DRIVER_LICENSE_PATH, file)
         .then(data => {
           const fileList = this.state.fileList.concat({
             url: OSS_LINK + data.name,

src/constant.js

@@ -2,8 +2,6 @@ export const ERROR_DEFAULT = "出错了！";
 
 export const LIMIT = 10; // 默认 limit
 
-export const OSS_ENDPOINT = "oss-cn-beijing.aliyuncs.com";
-export const OSS_BUCKET = "links-comment";
 export const DRIVER_LICENSE_PATH = "/comment";
 
 export const OSS_LINK = "//links-comment.oss-cn-beijing.aliyuncs.com";