Skip to content

Commit

Permalink
feat: upload image by minio (#131)
Browse files Browse the repository at this point in the history
  • Loading branch information
@li-xunhuan
li-xunhuan committed Feb 13, 2022
1 parent 4f296d6 commit e6cc11d
Show file tree
Hide file tree
Showing 5 changed files with 176 additions and 30 deletions.
19 changes: 10 additions & 9 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
49 changes: 47 additions & 2 deletions src/api/file.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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);
}
Expand Down Expand Up @@ -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
//-----------------------------------------------------------------------
Expand Down Expand Up @@ -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":
Expand Down
135 changes: 116 additions & 19 deletions src/components/CodemirrorEditor/uploadImgDialog.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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"
Expand Down Expand Up @@ -335,7 +399,7 @@ export default {
data() {
return {
activeName: `upload`,
formGitHub: {
repo: "",
branch: "",
Expand All @@ -354,6 +418,14 @@ export default {
path: "",
cdnHost: "",
},
minioOSS: {
endpoint: "",
port: "",
useSSL: true,
bucket: "",
accessKey: "",
secretKey: "",
},
formTxCOS: {
secretId: "",
secretKey: "",
Expand All @@ -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)
Expand Down Expand Up @@ -409,6 +483,10 @@ export default {
value: "qiniu",
label: "七牛云",
},
{
value: "minio",
label: "MinIO",
},
{
value: "formCustom",
label: "自定义代码",
Expand All @@ -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"));
}
Expand Down Expand Up @@ -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 (
!(
Expand Down Expand Up @@ -506,9 +601,9 @@ export default {
this.$message.success("保存成功");
},
formCustomSave() {
const str = this.formCustom.editor.getValue()
localStorage.setItem(`formCustomConfig`, str)
this.$message.success(`保存成功`)
const str = this.formCustom.editor.getValue();
localStorage.setItem(`formCustomConfig`, str);
this.$message.success(`保存成功`);
},
beforeImageUpload(file) {
Expand Down Expand Up @@ -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`)
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() {},
};
</script>

Expand Down Expand Up @@ -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;
Expand Down
2 changes: 2 additions & 0 deletions src/pages/index/view/CodemirrorEditor.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -267,6 +267,7 @@ export default {
fileApi
.fileUpload(base64Content, file)
.then((url) => {
console.log(url)
this.uploaded(url);
})
.catch((err) => {
Expand All @@ -280,6 +281,7 @@ export default {
},
// 图片上传结束
uploaded(response) {
console.log("图片上传之后: ", response)
if (!response) {
this.$message.error("上传图片未知异常");
return;
Expand Down

0 comments on commit e6cc11d

Please sign in to comment.