移动端只能上传一张图片；执行yarn lib

lib/components/Editor/index.css

@@ -130,3 +130,28 @@
     height: 28px;
   }
 }
+
+.comment-img-popover {
+  /* 一行显示3张图 */
+  width: 336px;
+  min-height: 100px;
+  margin: 0 auto;
+}
+
+.comment-img-title {
+  margin: 5px auto;
+}
+.comment-img-title-counter {
+  color: #666;
+  font-weight: 400;
+}
+
+@media (max-width: 575px) {
+  .comment-img-popover {
+    /* 一行显示2张图 */
+    width: 224px;
+  }
+  .comment-img-title-counter {
+    display: none;
+  }
+}

lib/components/Editor/index.js

@@ -36,9 +36,13 @@ require("antd/es/message/style");
 
 require("antd/es/input/style");
 
-var _react = require("react");
+var _dayjs = require("dayjs");
 
-var _react2 = _interopRequireDefault(_react);
+var _dayjs2 = _interopRequireDefault(_dayjs);
+
+var _shortid = require("shortid");
+
+var _shortid2 = _interopRequireDefault(_shortid);
 
 var _propTypes = require("prop-types");
 
@@ -48,34 +52,32 @@ var _classnames = require("classnames");
 
 var _classnames2 = _interopRequireDefault(_classnames);
 
-var _reactIntlUniversal = require("react-intl-universal");
-
-var _reactIntlUniversal2 = _interopRequireDefault(_reactIntlUniversal);
-
-var _dayjs = require("dayjs");
+var _react = require("react");
 
-var _dayjs2 = _interopRequireDefault(_dayjs);
+var _react2 = _interopRequireDefault(_react);
 
-var _shortid = require("shortid");
+var _reactIntlUniversal = require("react-intl-universal");
 
-var _shortid2 = _interopRequireDefault(_shortid);
+var _reactIntlUniversal2 = _interopRequireDefault(_reactIntlUniversal);
 
-var _constant = require("../../constant");
+var _Emoji = require("./Emoji");
 
-var _helper = require("../../helper");
+var _Emoji2 = _interopRequireDefault(_Emoji);
 
 var _Upload = require("./Upload");
 
 var _Upload2 = _interopRequireDefault(_Upload);
 
-var _Emoji = require("./Emoji");
-
-var _Emoji2 = _interopRequireDefault(_Emoji);
-
 var _Comment = require("../../Comment");
 
 var _Comment2 = _interopRequireDefault(_Comment);
 
+var _utils = require("./../../utils");
+
+var _constant = require("../../constant");
+
+var _helper = require("../../helper");
+
 require("./index.css");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -139,6 +141,7 @@ var Editor = function (_React$Component) {
     _this.resetState = _this.resetState.bind(_this);
     _this.handleEmojiScroll = _this.handleEmojiScroll.bind(_this);
     _this.handlePressEnter = _this.handlePressEnter.bind(_this);
+    _this.invokeFileListChange = _this.invokeFileListChange.bind(_this);
     return _this;
   }
 
@@ -213,8 +216,7 @@ var Editor = function (_React$Component) {
       if (fileList.length > this.props.maxUpload) {
         list = fileList.slice(0, this.props.maxUpload);
       }
-      this.props.handleChangeFileList(list);
-      this.setState({ fileList: list });
+      this.invokeFileListChange(list);
     }
 
     /**
@@ -252,16 +254,37 @@ var Editor = function (_React$Component) {
         }
         return item;
       });
-      this.props.handleChangeFileList(fileList);
-      this.setState({ fileMap: fileMap, fileList: fileList });
+      this.setState({ fileMap: fileMap });
+      this.invokeFileListChange(fileList);
     }
 
     /**
-     * 粘贴回调
+     *  **统一处理fileList的修改**
+     *  1. upload
+     *  2. paste
+     *  PS: 移动端需要做额外操作
+     *  -- evo 20200223
      */
 
+  }, {
+    key: "invokeFileListChange",
+    value: function invokeFileListChange(fileList) {
+      this.props.handleChangeFileList(fileList);
+      this.setState({ fileList: fileList });
+      if (_utils.isMobile) {
+        var file = fileList[0];
+        if (file && file.status === 'done' && !file.thumbUrl.includes('data:image')) {
+          this.setState({ uploadVisible: false });
+        }
+      }
+    }
   }, {
     key: "handlePaste",
+
+
+    /**
+     * 粘贴回调
+     */
     value: function handlePaste(e) {
       var _this2 = this;
 
@@ -293,10 +316,7 @@ var Editor = function (_React$Component) {
             type: file.type,
             uid: new Date().valueOf()
           });
-          _this2.props.handleChangeFileList(fileList);
-          _this2.setState({
-            fileList: fileList
-          });
+          _this2.invokeFileListChange(fileList);
         }).catch(function (e) {
           var msg = e.message || _constant.ERROR_DEFAULT;
           if (_this2.props.showError) {
@@ -525,13 +545,7 @@ var Editor = function (_React$Component) {
                     },
                     content: _react2.default.createElement(
                       "div",
-                      {
-                        style: {
-                          width: 336, // 一行显示3张
-                          minHeight: 100,
-                          margin: "0 auto"
-                        }
-                      },
+                      { className: "comment-img-popover" },
                       _react2.default.createElement(_Upload2.default, {
                         onRef: function onRef(node) {
                           return _this4.uploadRef = node;
@@ -548,14 +562,14 @@ var Editor = function (_React$Component) {
                     ),
                     title: _react2.default.createElement(
                       "div",
-                      { style: { margin: "5px auto" } },
+                      { className: "comment-img-title" },
                       _react2.default.createElement(
                         "span",
                         null,
                         _reactIntlUniversal2.default.get("editor.uploadTip"),
                         maxUpload >= 2 ? _react2.default.createElement(
                           "span",
-                          { style: { color: "#666", fontWeight: 400 } },
+                          { className: "comment-img-title-counter" },
                           _reactIntlUniversal2.default.get("editor.uploadCount", {
                             count: maxUpload - uploadFileList.length
                           })

lib/index.js

@@ -71,7 +71,6 @@ var Index = function (_React$Component) {
             _this2.setState({ value: value });
           },
           handleChangeFileList: function handleChangeFileList(fileList) {
-            console.log("----", fileList);
             _this2.setState({
               fileList: fileList
             });

lib/utils.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+/**
+ * 575: 为了和media query中的判断保持一致
+ */
+var isMobile = exports.isMobile = typeof window.orientation === 'number' && document.body.offsetWidth < 575;
+//# sourceMappingURL=utils.js.map

lib/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils.js"],"names":["isMobile","window","orientation","document","body","offsetWidth"],"mappings":";;;;;;AACA;;;AAGO,IAAMA,8BAAW,OAAOC,OAAOC,WAAd,KAA8B,QAA9B,IAA0CC,SAASC,IAAT,CAAcC,WAAd,GAA4B,GAAvF","file":"utils.js","sourcesContent":["\n/**\n * 575: 为了和media query中的判断保持一致\n */\nexport const isMobile = typeof window.orientation === 'number' && document.body.offsetWidth < 575"]}

lib/version.json

@@ -1,8 +1,8 @@
 {
     "name":       "comment",
-    "buildDate":  1582351916030,
+    "buildDate":  1582452764350,
     "version":    "1.0.4",
-    "numCommits": 201,
-    "hash":       "556bf1c",
-    "dirty":      false
+    "numCommits": 203,
+    "hash":       "e963be4",
+    "dirty":      true
 }

src/components/Editor/index.js

@@ -1,15 +1,16 @@
-import React, { Fragment } from "react";
+import dayjs from "dayjs";
+import shortid from "shortid";
 import PropTypes from "prop-types";
-import { Icon, Button, Popover, Input, message } from "antd";
 import classnames from "classnames";
+import React, { Fragment } from "react";
 import intl from "react-intl-universal";
-import dayjs from "dayjs";
-import shortid from "shortid";
-import { OSS_LINK } from "../../constant";
-import { isFunction } from "../../helper";
-import Upload from "./Upload";
+import { Icon, Button, Popover, Input, message } from "antd";
 import Emoji from "./Emoji";
+import Upload from "./Upload";
 import Comment from "../../Comment";
+import { isMobile } from "./../../utils";
+import { OSS_LINK } from "../../constant";
+import { isFunction } from "../../helper";
 import {
   OSS_ENDPOINT,
   OSS_BUCKET,
@@ -70,6 +71,7 @@ class Editor extends React.Component {
     this.resetState = this.resetState.bind(this);
     this.handleEmojiScroll = this.handleEmojiScroll.bind(this);
     this.handlePressEnter = this.handlePressEnter.bind(this);
+    this.invokeFileListChange = this.invokeFileListChange.bind(this);
   }
 
   componentDidMount() {
@@ -131,8 +133,7 @@ class Editor extends React.Component {
     if (fileList.length > this.props.maxUpload) {
       list = fileList.slice(0, this.props.maxUpload);
     }
-    this.props.handleChangeFileList(list);
-    this.setState({ fileList: list });
+    this.invokeFileListChange(list);
   }
 
   /**
@@ -161,8 +162,30 @@ class Editor extends React.Component {
       }
       return item;
     });
+    this.setState({ fileMap });
+    this.invokeFileListChange(fileList);
+  }
+
+  /**
+   *  **统一处理fileList的修改**
+   *  1. upload
+   *  2. paste
+   *  PS: 移动端需要做额外操作
+   *  -- evo 20200223
+   */
+  invokeFileListChange(fileList) {
     this.props.handleChangeFileList(fileList);
-    this.setState({ fileMap, fileList });
+    this.setState({ fileList });
+    if (isMobile) {
+      const file = fileList[0];
+      if (
+        file &&
+        file.status === "done" &&
+        !file.thumbUrl.includes("data:image")
+      ) {
+        this.setState({ uploadVisible: false });
+      }
+    }
   }
 
   /**
@@ -198,10 +221,7 @@ class Editor extends React.Component {
             type: file.type,
             uid: new Date().valueOf()
           });
-          this.props.handleChangeFileList(fileList);
-          this.setState({
-            fileList
-          });
+          this.invokeFileListChange(fileList);
         })
         .catch(e => {
           const msg = e.message || ERROR_DEFAULT;

src/index.js

@@ -38,7 +38,6 @@ class Index extends React.Component {
             this.setState({ value });
           }}
           handleChangeFileList={fileList => {
-            console.log("----", fileList);
             this.setState({
               fileList
             });

src/utils.js

@@ -0,0 +1,5 @@
+/**
+ * 575: 为了和media query中的判断保持一致
+ */
+export const isMobile =
+  typeof window.orientation === "number" && document.body.offsetWidth < 575;