From e6cc11d67bbcd754f13a2f03f34f106e06a698c4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E5=AF=BB=E6=AC=A2?= <10476982+li-xunhuan@users.noreply.github.com> Date: Mon, 14 Feb 2022 00:12:07 +0800 Subject: [PATCH] feat: upload image by minio (#131) --- README.md | 19 +-- package.json | 1 + src/api/file.js | 49 ++++++- .../CodemirrorEditor/uploadImgDialog.vue | 135 +++++++++++++++--- src/pages/index/view/CodemirrorEditor.vue | 2 + 5 files changed, 176 insertions(+), 30 deletions(-) diff --git a/README.md b/README.md index 88b20a4ef..83d3cde3b 100644 --- a/README.md +++ b/README.md @@ -45,15 +45,16 @@ 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 | 自定义上传 | 是 | [如何自定义上传？](#自定义上传逻辑) | +| # | 图床 | 使用时是否需要配置 | 备注 | +| --- | ----------------------------------------------- | -------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | +| 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 | [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) diff --git a/package.json b/package.json index 3bec4d40c..1ff65276b 100644 --- a/package.json +++ b/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", diff --git a/src/api/file.js b/src/api/file.js index 9126bb4e8..4c72c3d51 100644 --- a/src/api/file.js +++ b/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; - return `${cdnHost}/${path == "" ? dateFilename : dir}`; + if (cdnHost === "") return res.url; + 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": diff --git a/src/components/CodemirrorEditor/uploadImgDialog.vue b/src/components/CodemirrorEditor/uploadImgDialog.vue index 6284c5201..054910b44 100644 --- a/src/components/CodemirrorEditor/uploadImgDialog.vue +++ b/src/components/CodemirrorEditor/uploadImgDialog.vue @@ -288,7 +288,70 @@ - + + + + + + + + + + + + + + + + + + + + + 如何使用 MinIO？ + + + 保存配置 + + + + + v-model="formCustom.code" + > { - const 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) - }) + const 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); + }); } }, }, }, - mounted() { - - }, + mounted() {}, }; @@ -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; diff --git a/src/pages/index/view/CodemirrorEditor.vue b/src/pages/index/view/CodemirrorEditor.vue index 716ce55f5..5b64c482a 100644 --- a/src/pages/index/view/CodemirrorEditor.vue +++ b/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;