Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

file upload add minio #131

Merged
merged 13 commits into from
Feb 13, 2022
Merged

file upload add minio #131

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
39f5a40
file upload add minio
lixh00 Feb 13, 2022
7055d70
:art: art code
lixh00 Feb 13, 2022
f45e81d
:art: art code
lixh00 Feb 13, 2022
91e7d9f
:art: art code
lixh00 Feb 13, 2022
c51bddc
update readme
lixh00 Feb 13, 2022
81f2666
Update README.md
yanglbme Feb 13, 2022
8e7b2b3
Update uploadImgDialog.vue
yanglbme Feb 13, 2022
e4e184c
Update file.js
yanglbme Feb 13, 2022
42e174c
Update uploadImgDialog.vue
yanglbme Feb 13, 2022
9d9f2f1
Update uploadImgDialog.vue
yanglbme Feb 13, 2022
5449f39
Update uploadImgDialog.vue
yanglbme Feb 13, 2022
4ee4b64
Update file.js
yanglbme Feb 13, 2022
2a4c10f
Update file.js
yanglbme Feb 13, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 10 additions & 9 deletions README.md
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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