支持七牛云

Author: guanpengchn

.github/ISSUE_TEMPLATE/bug_report.md

@@ -7,15 +7,21 @@ assignees: guanpengchn
 
 ---
 
-**运行环境： **
+**运行环境：**
 
 |操作系统|浏览器|
 |---|---|
 |macOS|Chrome|
 
 **Markdown文本内容：**
 
-例如：默认文本
+例如：
+
+```md
+- 默认文本1
+- 默认文本2
+- 默认文本3
+```
 
 **错误详情：**
 

CHANGELOG.md

@@ -1,3 +1,8 @@
+v1.1.5 发布日期：2019-09-01
+- 支持自定义「七牛云」做图床
+- 提供mdnice自建免费图床，仅支持临时使用，一天后删除
+- 示例请重置后查看「第10条」
+
 v1.1.4 发布日期：2019-08-31
 - 解决公式处理bug
 - 添加移动端提示页

package.json

@@ -57,6 +57,7 @@
     "postcss-loader": "3.0.0",
     "postcss-preset-env": "6.5.0",
     "postcss-safe-parser": "4.0.1",
+    "qiniu-js": "^2.5.4",
     "react": "^16.7.0",
     "react-app-polyfill": "^0.2.1",
     "react-dev-utils": "^7.0.3",

src/component/Copy.js

@@ -2,14 +2,15 @@ import React, { Component } from "react";
 import juice from "juice";
 import { observer, inject } from "mobx-react";
 import { Button, message, ConfigProvider } from "antd";
-import axios from "axios";
 
 import {
   BASIC_THEME_ID,
   CODE_THEME_ID,
   MARKDOWN_THEME_ID
 } from "../utils/constant";
 
+import { axiosMdnice } from "../utils/helper";
+
 @inject("content")
 @inject("navbar")
 @inject("imageHosting")
@@ -55,12 +56,12 @@ class Copy extends Component {
         let formula = math.split("$$")[1];
         formula = encodeURI(formula.replace(/\s/g, "&space;"));
         const ip = window.returnCitySN.cip.replace(/\./g, "-");
-        const url = `https://math.mdnice.com/${ip}/type/png/scale/${this.scale}/math/${formula}`;
+        const url = `/${ip}/type/png/scale/${this.scale}/math/${formula}`;
         urlArr.push(url);
       }
 
       // 使用promise并行发请求，增快公式转换速度
-      const promiseArr = urlArr.map(url => axios.get(url));
+      const promiseArr = urlArr.map(url => axiosMdnice.get(url));
 
       const resultArr = await Promise.all(promiseArr);
       resultArr.forEach((result, index) => {
@@ -106,11 +107,11 @@ class Copy extends Component {
         let formula = math.split("$")[1];
         formula = encodeURI(formula.replace(/\s/g, "&space;"));
         const ip = window.returnCitySN.cip.replace(/\./g, "-");
-        const url = `https://math.mdnice.com/${ip}/type/png/scale/${this.scale}/math/${formula}`;
+        const url = `/${ip}/type/png/scale/${this.scale}/math/${formula}`;
         urlArr.push(url);
       }
       // 使用promise并行发请求，增快公式转换速度
-      const promiseArr = urlArr.map(url => axios.get(url));
+      const promiseArr = urlArr.map(url => axiosMdnice.get(url));
 
       const resultArr = await Promise.all(promiseArr);
       resultArr.forEach((result, index) => {
@@ -143,8 +144,8 @@ class Copy extends Component {
   // 拷贝流程 块级公式 => 行内公式 => 其他
   copy = async () => {
     try {
-      axios.get(
-        `https://math.mdnice.com/${window.returnCitySN.cip}/${window.returnCitySN.cname}`
+      axiosMdnice.get(
+        `/${window.returnCitySN.cip}/${window.returnCitySN.cname}`
       );
       this.setState({ loading: true });
       const flagBlock = await this.solveBlockMath();

src/component/Dialog/ImageDialog.js

@@ -5,14 +5,17 @@ import axios from "axios";
 import OSS from "ali-oss";
 
 import AliOSS from "../ImageHosting/AliOSS";
+import QiniuOSS from "../ImageHosting/QiniuOSS";
 
-import { toBlob, dateFormat } from "../../utils/helper";
+import { toBlob, getOSSName, axiosMdnice } from "../../utils/helper";
 import {
   SM_MS_PROXY,
   ALIOSS_IMAGE_HOSTING,
+  QINIUOSS_IMAGE_HOSTING,
   IMAGE_HOSTING_TYPE,
   IMAGE_HOSTING_TYPE_OPTIONS
 } from "../../utils/constant";
+import * as qiniu from "qiniu-js";
 
 const Dragger = Upload.Dragger;
 const { TabPane } = Tabs;
@@ -69,10 +72,21 @@ class ImageDialog extends Component {
     }
     // 使用阿里云图床
     if (this.props.imageHosting.type === "阿里云") {
-      const config = JSON.parse(
+      const configAli = JSON.parse(
         window.localStorage.getItem(ALIOSS_IMAGE_HOSTING)
       );
-      this.aliOSSUpload(config, file, onSuccess, onError);
+      this.aliOSSUpload(configAli, file, onSuccess, onError);
+    }
+    // 使用七牛云图床
+    else if (this.props.imageHosting.type === "七牛云") {
+      const configQiniu = JSON.parse(
+        window.localStorage.getItem(QINIUOSS_IMAGE_HOSTING)
+      );
+      this.qiniuOSSUpload(configQiniu, file, onSuccess, onError, onProgress);
+    }
+    // 使用七牛云免费图床
+    else if (this.props.imageHosting.type === "mdnice") {
+      this.qiniuFreeUpload(formData, file, onSuccess, onError);
     }
     // 使用SM.MS图床
     else {
@@ -95,6 +109,7 @@ class ImageDialog extends Component {
     };
   };
 
+  // SM.MS存储上传
   smmsUpload = (
     formData,
     file,
@@ -137,6 +152,7 @@ class ImageDialog extends Component {
       });
   };
 
+  // 阿里云对象存储上传
   aliOSSUpload = (config, file, onSuccess, onError) => {
     const base64Reader = new FileReader();
     base64Reader.readAsDataURL(file);
@@ -162,27 +178,20 @@ class ImageDialog extends Component {
     };
   };
 
+  // 阿里云对象存储上传
   aliOSSPutObject = (config, file, value, onSuccess, onError) => {
     let client;
-    try{
+    try {
       client = new OSS(config);
-    } catch(error) {
+    } catch (error) {
       message.error("OSS配置错误，请根据文档检查配置项");
       return;
     }
-    const names = file.name.split(".");
-    let key = "";
-    if (names.length > 1) {
-      const suffix = names.pop();
-      key = `${names.join(".")}_${dateFormat(
-        new Date(),
-        "yyyyMMddhhmmss"
-      )}.${suffix}`;
-    } else {
-      key = file.name + "_" + dateFormat(new Date(), "yyyyMMddhhmmss");
-    }
+
+    const OSSName = getOSSName(file.name);
+
     client
-      .put(key, value)
+      .put(OSSName, value)
       .then(response => {
         const names = file.name.split(".");
         names.pop();
@@ -200,6 +209,113 @@ class ImageDialog extends Component {
       });
   };
 
+  // 七牛云对象存储上传
+  qiniuOSSUpload = async (config, file, onSuccess, onError, onProgress) => {
+    try {
+      const result = await axiosMdnice.get(
+        `/qiniu/${config.bucket}/${config.accessKey}/${config.secretKey}`
+      );
+      const token = result.data;
+
+      const base64Reader = new FileReader();
+      base64Reader.readAsDataURL(file);
+      base64Reader.onload = e => {
+        const urlData = e.target.result;
+        const base64 = urlData.split(",").pop();
+        const fileType = urlData
+          .split(";")
+          .shift()
+          .split(":")
+          .pop();
+
+        // base64转blob
+        const blob = toBlob(base64, fileType);
+
+        const conf = {
+          useCdnDomain: true,
+          region: qiniu.region[config.region] // 区域
+        };
+
+        const putExtra = {
+          fname: "",
+          params: {},
+          mimeType: [] || null
+        };
+
+        const OSSName = getOSSName(file.name);
+
+        // 这里第一个参数的形式是blob
+        const observable = qiniu.upload(blob, OSSName, token, putExtra, conf);
+
+        // 上传成功后回调
+        const complete = response => {
+          console.log(response);
+          const names = file.name.split(".");
+          names.pop();
+          const filename = names.join(".");
+          const image = {
+            filename, // 名字不变并且去掉后缀
+            url: `http://qiniu.mdnice.com/${response.key}`
+          };
+          this.images.push(image);
+          onSuccess(response);
+        };
+
+        // 上传过程回调
+        const next = response => {
+          console.log(response);
+          onProgress(
+            {
+              percent: parseInt(Math.round(response.total.percent.toFixed(2)))
+            },
+            file
+          );
+        };
+
+        // 上传错误回调
+        const error = err => {
+          onError(err, err.toString());
+        };
+
+        const observer = {
+          next,
+          error,
+          complete
+        };
+        // 注册observer 对象
+        observable.subscribe(observer);
+      };
+    } catch (err) {
+      onError(err, err.toString());
+    }
+  };
+
+  // 七牛云免费上传图床
+  qiniuFreeUpload = async (formData, file, onSuccess, onError) => {
+    try {
+      formData.append("file", file);
+      const config = {
+        headers: { "Content-Type": "multipart/form-data" }
+      };
+      const result = await axiosMdnice.post(
+        `/qiniuFree`,
+        formData,
+        config
+      );
+      const names = file.name.split(".");
+      names.pop();
+      const filename = names.join(".");
+      const image = {
+        filename, // 名字不变并且去掉后缀
+        url: result.data
+      };
+      this.images.push(image);
+      onSuccess(result);
+    } catch (err) {
+      onError(err, err.toString());
+    }
+  };
+
   typeChange = type => {
     this.props.imageHosting.setType(type);
     localStorage.setItem(IMAGE_HOSTING_TYPE, type);
@@ -243,9 +359,12 @@ class ImageDialog extends Component {
               </p>
             </Dragger>
           </TabPane>
-          <TabPane tab="阿里云OSS" key="2">
+          <TabPane tab="阿里云" key="2">
             <AliOSS />
           </TabPane>
+          <TabPane tab="七牛云" key="3">
+            <QiniuOSS />
+          </TabPane>
         </Tabs>
       </Modal>
     );