feat(支持图片上传) 新增SM.MS图床,支持图片上传功能

package.json

@@ -7,6 +7,7 @@
     "@material-ui/core": "^3.9.2",
     "@material-ui/icons": "^3.0.2",
     "@svgr/webpack": "4.1.0",
+    "axios": "^0.19.0",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "9.0.0",
     "babel-jest": "23.6.0",

src/App.js

@@ -92,7 +92,8 @@ const styles = theme => ({
     width: contentWidth + "mm",
     height: contentHeight + "mm",
     background: "white",
-    overflow: "auto"
+    overflow: "auto",
+    wordBreak: "break-all"
   },
   navbar: {
     width: "100%",

src/components/Button/Picture.js

@@ -4,30 +4,61 @@ import PropTypes from "prop-types";
 import { withStyles } from "@material-ui/core/styles";
 import Tooltip from "@material-ui/core/Tooltip";
 import Button from "@material-ui/core/Button";
+import axios from "axios";
 
 import picture from "../../icons/picture.svg";
 
-import { ENTER_DELAY, LEAVE_DELAY, DATA_MARKDOWN } from "../../utils/constant";
+import {
+  ENTER_DELAY,
+  LEAVE_DELAY,
+  DATA_MARKDOWN,
+  DATA_ORIGIN,
+  SM_MS_PROXY
+} from "../../utils/constant";
 
 import { observer, inject } from "mobx-react";
 
 @inject("navbar")
 @inject("resume")
+@inject("hint")
 @observer
 class Picture extends Component {
   /**
-   * 更新markdown样式
+   * 上传图片
    */
-  updateStyle = flag => event => {
+  uploadPicture = async ({ target }) => {
-    event.stopPropagation();
+    const file = document.getElementById("uploadImage");
-    const id = this.props.resume.choosenKey;
+    const formData = new FormData();
-    const element = document.getElementById(id);
+    formData.append("smfile", file.files[0]);
-    let content = element.getAttribute(DATA_MARKDOWN);
-    content = "- " + content;
 
-    // 更新markdown内容
+    const result = await axios.post(SM_MS_PROXY, formData);
-    element.childNodes[0].innerText = content;
+    if (result.data.message === "Image upload repeated limit.") {
-    element.setAttribute(DATA_MARKDOWN, content);
+      this.props.hint.setError({
+        isOpen: true,
+        message: "同一张图片无法上传多次"
+      });
+    } else {
+      const id = this.props.resume.choosenKey;
+      console.log(id);
+      const element = document.getElementById(id);
+
+      const { isMarkdownMode } = this.props.navbar;
+      let content;
+      if (isMarkdownMode) {
+        content = `![avatar](${result.data.data.url})`;
+        element.childNodes[0].innerText = content;
+        element.setAttribute(DATA_MARKDOWN, content);
+      } else {
+        content = `<section><p><img src="${result.data.data.url}" alt="avatar"></p>\n</section>`
+        element.childNodes[0].innerHTML = content;
+        element.setAttribute(DATA_ORIGIN, content);
+      }
+     
+    }
+  };
+
+  stopPropagation = event => {
+    event.stopPropagation();
   };
 
   render() {
@@ -44,6 +75,7 @@ class Picture extends Component {
         <Button
           className={classes.btn}
           disabled={this.props.navbar.isDisabled}
+          onClick={this.stopPropagation}
           classes={{
             root: classes.minWidth,
             disabled: classes.opacity
@@ -52,11 +84,11 @@ class Picture extends Component {
           <input
             accept="image/*"
             className={classes.input}
-            id="contained-button-file"
+            id="uploadImage"
-            multiple
+            onChange={this.uploadPicture}
             type="file"
           />
-          <label htmlFor="contained-button-file" className={classes.label}>
+          <label htmlFor="uploadImage" className={classes.label}>
             <img src={picture} alt="logo" />
           </label>
         </Button>
@@ -67,14 +99,16 @@ class Picture extends Component {
 
 const styles = theme => ({
   input: {
-    display: "none"
+    display: "none",
+    width: "100%"
   },
   label: {
     display: "flex",
-    height: "100%"
+    height: "100%",
+    padding: "6px 10px"
   },
   btn: {
-    padding: "6px 10px",
+    padding: "0px",
     borderRadius: "0",
     borderBottom: "1px solid #cccccc",
     borderTop: "1px solid #cccccc",

src/utils/constant.js

@@ -24,6 +24,9 @@ export const STORAGE_LAYOUT = "layout";
 export const TEMPLATE_NUM = "templateNum";
 export const MARKDOWN_MODE = "markdownMode";
 
+export const SM_MS_PROXY =
+  "https://cors-anywhere.herokuapp.com/https://sm.ms/api/upload";
+
 // 帮助信息
 export const HELP_USE = `
 ### 使用规则

yarn.lock

@@ -1721,6 +1721,14 @@ aws4@^1.8.0:
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.8.0.tgz#f0e003d9ca9e7f59c7a508945d7b2ef9a04a542f"
   integrity sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==
 
+axios@^0.19.0:
+  version "0.19.0"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.19.0.tgz#8e09bff3d9122e133f7b8101c8fbdd00ed3d2ab8"
+  integrity sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1E5oqjDnuEerLmYTgJB5AiQZHJcljpg1TuRzdjDR06qNk0DQ==
+  dependencies:
+    follow-redirects "1.5.10"
+    is-buffer "^2.0.2"
+
 axobject-query@^2.0.1:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.0.2.tgz#ea187abe5b9002b377f925d8bf7d1c561adf38f9"
@@ -4305,6 +4313,13 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.1"
     readable-stream "^2.0.4"
 
+follow-redirects@1.5.10:
+  version "1.5.10"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a"
+  integrity sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==
+  dependencies:
+    debug "=3.1.0"
+
 follow-redirects@^1.0.0:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.6.1.tgz#514973c44b5757368bad8bddfe52f81f015c94cb"
@@ -5202,7 +5217,7 @@ is-buffer@^1.0.2, is-buffer@^1.1.5:
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
   integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
 
-is-buffer@^2.0.0:
+is-buffer@^2.0.0, is-buffer@^2.0.2:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-2.0.3.tgz#4ecf3fcf749cbd1e472689e109ac66261a25e725"
   integrity sha512-U15Q7MXTuZlrbymiz95PJpZxu8IlipAp4dtS3wOdgPXx3mqBnslrWU14kxfHB+Py/+2PVKSr37dMAgM2A4uArw==