feat: upload image by minio (#131)

README.md

@@ -46,14 +46,15 @@ Markdown 文档自动即时渲染为微信图文，让你不再为微信文章
 ## 目前支持哪些图床
 
 | #   | 图床                                            | 使用时是否需要配置                                                         | 备注                                                                                                                   |
-| --- | ----------------------------------------------- | ---------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
+| --- | ----------------------------------------------- | -------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
 | 1   | 默认                                            | 否                                                                         | -                                                                                                                      |
 | 2   | [Gitee](https://gitee.com)                      | 配置 `Repo`、`Token` 参数                                                  | 图片超过 1MB 无法正常展示                                                                                              |
 | 3   | [GitHub](https://github.com)                    | 配置 `Repo`、`Token` 参数                                                  | [如何获取 GitHub token？](https://docs.github.com/en/github/authenticating-to-github/creating-a-personal-access-token) |
 | 4   | [阿里云](https://www.aliyun.com/product/oss)    | 配置 `AccessKey ID`、`AccessKey Secret`、`Bucket`、`Region` 参数           | [如何使用阿里云 OSS？](https://help.aliyun.com/document_detail/31883.html)                                             |
 | 5   | [腾讯云](https://cloud.tencent.com/act/pro/cos) | 配置 `SecretId`、`SecretKey`、`Bucket`、`Region` 参数                      | [如何使用腾讯云 COS？](https://cloud.tencent.com/document/product/436/38484)                                           |
 | 6   | [七牛云](https://www.qiniu.com/products/kodo)   | 配置 `AccessKey`、`SecretKey`、`Bucket`、`Domain`、`Region` 参数           | [如何使用七牛云 Kodo？](https://developer.qiniu.com/kodo)                                                              |
-| 7   | 自定义上传                                      | 是                                                               | [如何自定义上传？](#自定义上传逻辑)                                                                                    |
+| 7   | [MinIO](https://min.io/)                        | 配置 `Endpoint`、`Port`、`UseSSL`、`Bucket`、`AccessKey`、`SecretKey` 参数 | [如何使用 MinIO？](http://docs.minio.org.cn/docs/master/minio-client-complete-guide)                                   |
+| 8   | 自定义上传                                      | 是                                                                         | [如何自定义上传？](#自定义上传逻辑)                                                                                    |
 
 ![select-and-change-color-theme](https://doocs.oss-cn-shenzhen.aliyuncs.com/img//1606034542281-a8c99fa7-c11e-4e43-98da-e36012f54dc8.gif)
 

package.json

@@ -25,6 +25,7 @@
     "jquery": "^3.6.0",
     "juice": "^8.0.0",
     "marked": "^4.0.10",
+    "minio": "^7.0.26",
     "node-fetch": "^3.1.0",
     "prettier": "^2.5.1",
     "prettify": "^0.1.7",

src/api/file.js

@@ -2,6 +2,7 @@ import fetch from "./fetch";
 import { githubConfig, giteeConfig } from "./config";
 import CryptoJS from "crypto-js";
 import OSS from "ali-oss";
+import * as Minio from "minio";
 import COS from "cos-js-sdk-v5";
 import Buffer from "buffer-from";
 import { v4 as uuidv4 } from "uuid";
@@ -182,8 +183,8 @@ async function aliOSSFileUpload(content, filename) {
   });
   try {
     const res = await client.put(dir, buffer);
-    if (cdnHost == "") return res.url;
+    if (cdnHost === "") return res.url;
-    return `${cdnHost}/${path == "" ? dateFilename : dir}`;
+    return `${cdnHost}/${path === "" ? dateFilename : dir}`;
   } catch (e) {
     return Promise.reject(e);
   }
@@ -227,6 +228,48 @@ async function txCOSFileUpload(file) {
   });
 }
 
+//-----------------------------------------------------------------------
+// Minio File Upload
+//-----------------------------------------------------------------------
+
+async function minioFileUpload(content, filename) {
+  const dateFilename = getDateFilename(filename);
+  const { endpoint, port, useSSL, bucket, accessKey, secretKey } = JSON.parse(
+    localStorage.getItem("minioConfig")
+  );
+  const buffer = Buffer(content, "base64");
+  const conf = {
+    endPoint: endpoint,
+    useSSL: useSSL,
+    accessKey: accessKey,
+    secretKey: secretKey,
+  };
+  const p = Number(port || 0);
+  const isCustomPort = p > 0 && p !== 80 && p !== 443;
+  if (isCustomPort) {
+    conf.port = p;
+  }
+  return new Promise((resolve, reject) => {
+    const minioClient = new Minio.Client(conf);
+    try {
+      minioClient.putObject(bucket, dateFilename, buffer, function (e) {
+        if (e) {
+          reject(e);
+        }
+        const host = `${useSSL ? "https://" : "http://"}${endpoint}${
+          isCustomPort ? ":" + port : ""
+        }`;
+        const url = `${host}/${bucket}/${dateFilename}`;
+        // console.log("文件上传成功: ", url)
+        resolve(url);
+        // return `${endpoint}/${bucket}/${dateFilename}`;
+      });
+    } catch (e) {
+      reject(e);
+    }
+  });
+}
+
 //-----------------------------------------------------------------------
 // formCustom File Upload
 //-----------------------------------------------------------------------
@@ -269,6 +312,8 @@ function fileUpload(content, file) {
   switch (imgHost) {
     case "aliOSS":
       return aliOSSFileUpload(content, file.name);
+    case "minio":
+      return minioFileUpload(content, file.name);
     case "txCOS":
       return txCOSFileUpload(file);
     case "qiniu":

src/components/CodemirrorEditor/uploadImgDialog.vue

@@ -288,7 +288,70 @@
           </el-form-item>
         </el-form>
       </el-tab-pane>
-      <el-tab-pane class="github-panel formCustom" label="自定义代码" name="formCustom">
+      <el-tab-pane class="github-panel" label="MinIO" name="minio">
+        <el-form
+          class="setting-form"
+          :model="minioOSS"
+          label-position="right"
+          label-width="140px"
+        >
+          <el-form-item label="Endpoint" :required="true">
+            <el-input
+              v-model.trim="minioOSS.endpoint"
+              placeholder="如：play.min.io"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="Port" :required="false">
+            <el-input
+              type="number"
+              v-model.trim="minioOSS.port"
+              placeholder="如：9000，可不填，http 默认为 80，https 默认为 443"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="UseSSL" :required="true">
+            <el-switch
+              v-model="minioOSS.useSSL"
+              active-text="是"
+              inactive-text="否"
+            >
+            </el-switch>
+          </el-form-item>
+          <el-form-item label="Bucket" :required="true">
+            <el-input
+              v-model.trim="minioOSS.bucket"
+              placeholder="如：doocs"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="AccessKey" :required="true">
+            <el-input
+              v-model.trim="minioOSS.accessKey"
+              placeholder="如：zhangsan"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="SecretKey" :required="true">
+            <el-input
+              v-model.trim="minioOSS.secretKey"
+              placeholder="如：asdasdasd"
+            ></el-input>
+            <el-link
+              type="primary"
+              href="http://docs.minio.org.cn/docs/master/minio-client-complete-guide"
+              target="_blank"
+              >如何使用 MinIO？</el-link
+            >
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="saveMinioOSSConfiguration"
+              >保存配置</el-button
+            >
+          </el-form-item>
+        </el-form>
+      </el-tab-pane>
+      <el-tab-pane
+        class="github-panel formCustom"
+        label="自定义代码"
+        name="formCustom"
+      >
         <el-form
           class="setting-form"
           :model="formCustom"
@@ -301,7 +364,8 @@
               type="textarea"
               resize="none"
               placeholder="Your custom code here."
-              v-model="formCustom.code">
+              v-model="formCustom.code"
+            >
             </el-input>
             <el-link
               type="primary"
@@ -354,6 +418,14 @@ export default {
         path: "",
         cdnHost: "",
       },
+      minioOSS: {
+        endpoint: "",
+        port: "",
+        useSSL: true,
+        bucket: "",
+        accessKey: "",
+        secretKey: "",
+      },
       formTxCOS: {
         secretId: "",
         secretKey: "",
@@ -370,7 +442,9 @@ export default {
         region: "",
       },
       formCustom: {
-        code: localStorage.getItem(`formCustomConfig`) || removeLeft(`
+        code:
+          localStorage.getItem(`formCustomConfig`) ||
+          removeLeft(`
           const {file, util, okCb, errCb} = CUSTOM_ARG
           const param = new FormData()
           param.append('file', file)
@@ -409,6 +483,10 @@ export default {
           value: "qiniu",
           label: "七牛云",
         },
+        {
+          value: "minio",
+          label: "MinIO",
+        },
         {
           value: "formCustom",
           label: "自定义代码",
@@ -427,6 +505,9 @@ export default {
     if (localStorage.getItem("aliOSSConfig")) {
       this.formAliOSS = JSON.parse(localStorage.getItem("aliOSSConfig"));
     }
+    if (localStorage.getItem("minioConfig")) {
+      this.minioOSS = JSON.parse(localStorage.getItem("minioConfig"));
+    }
     if (localStorage.getItem("txCOSConfig")) {
       this.formTxCOS = JSON.parse(localStorage.getItem("txCOSConfig"));
     }
@@ -472,7 +553,21 @@ export default {
       localStorage.setItem("aliOSSConfig", JSON.stringify(this.formAliOSS));
       this.$message.success("保存成功");
     },
-
+    saveMinioOSSConfiguration() {
+      if (
+        !(
+          this.minioOSS.endpoint &&
+          this.minioOSS.bucket &&
+          this.minioOSS.accessKey &&
+          this.minioOSS.secretKey
+        )
+      ) {
+        this.$message.error(`MinIO 参数配置不全`);
+        return;
+      }
+      localStorage.setItem("minioConfig", JSON.stringify(this.minioOSS));
+      this.$message.success("保存成功");
+    },
     saveTxCOSConfiguration() {
       if (
         !(
@@ -506,9 +601,9 @@ export default {
       this.$message.success("保存成功");
     },
     formCustomSave() {
-      const str = this.formCustom.editor.getValue()
+      const str = this.formCustom.editor.getValue();
-      localStorage.setItem(`formCustomConfig`, str)
+      localStorage.setItem(`formCustomConfig`, str);
-      this.$message.success(`保存成功`)
+      this.$message.success(`保存成功`);
     },
 
     beforeImageUpload(file) {
@@ -539,21 +634,22 @@ export default {
     activeName: {
       immediate: true,
       handler(val) {
-        if(val === `formCustom`) {
+        if (val === `formCustom`) {
           this.$nextTick(() => {
-            const textarea = this.$refs.formCustomElInput.$el.querySelector(`textarea`)
+            const textarea =
-            this.formCustom.editor = this.formCustom.editor || CodeMirror.fromTextArea(textarea, {
+              this.$refs.formCustomElInput.$el.querySelector(`textarea`);
+            this.formCustom.editor =
+              this.formCustom.editor ||
+              CodeMirror.fromTextArea(textarea, {
                 mode: `javascript`,
-            })
+              });
-            this.formCustom.editor.setValue(this.formCustom.code)
+            this.formCustom.editor.setValue(this.formCustom.code);
-          })
+          });
         }
       },
     },
   },
-  mounted() {
+  mounted() {},
-    
-  },
 };
 </script>
 
@@ -600,7 +696,8 @@ export default {
     /deep/ .CodeMirror {
       border: 1px solid #eee;
       height: 300px !important;
-      font-family: "Fira Mono", "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace !important;
+      font-family: "Fira Mono", "DejaVu Sans Mono", Menlo, Consolas,
+        "Liberation Mono", Monaco, "Lucida Console", monospace !important;
       line-height: 20px;
       .CodeMirror-scroll {
         padding: 10px;

src/pages/index/view/CodemirrorEditor.vue

@@ -267,6 +267,7 @@ export default {
           fileApi
             .fileUpload(base64Content, file)
             .then((url) => {
+              console.log(url)
               this.uploaded(url);
             })
             .catch((err) => {
@@ -280,6 +281,7 @@ export default {
     },
     // 图片上传结束
     uploaded(response) {
+      console.log("图片上传之后: ", response)
       if (!response) {
         this.$message.error("上传图片未知异常");
         return;