Skip to content

Commit

Permalink
feat: update uploadImgDialog component
Browse files Browse the repository at this point in the history
更新图床组件
  • Loading branch information
yanglbme committed Sep 16, 2020
1 parent e6a2dc3 commit 68ab146
Show file tree
Hide file tree
Showing 3 changed files with 41 additions and 41 deletions.
16 changes: 9 additions & 7 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@

<div align="center">

[![actions status](https://github.com/doocs/md/workflows/Sync/badge.svg)](https://github.com/doocs/md/actions) [![actions status](https://github.com/doocs/md/workflows/Build%20and%20Deploy/badge.svg)](https://github.com/doocs/md/actions) [![PRs Welcome](https://badgen.net/badge/PRs/welcome/green)](../../pulls) [![users](https://badgen.net/badge/who's/using/green)](../../issues)<br> [![github](https://badgen.net/badge/⭐/GitHub/blue)](https://github.com/doocs/md) [![gitee](https://badgen.net/badge/⭐/Gitee/blue)](https://gitee.com/doocs/md) [![license](https://badgen.net/github/license/doocs/md)](./LICENSE) [![release](https://img.shields.io/github/v/release/doocs/md.svg)](../../releases)
[![actions status](https://github.com/doocs/md/workflows/Sync/badge.svg)](https://github.com/doocs/md/actions) [![actions status](https://github.com/doocs/md/workflows/Build%20and%20Deploy/badge.svg)](https://github.com/doocs/md/actions) [![PRs Welcome](https://badgen.net/badge/PRs/welcome/green)](../../pulls) [![users](https://badgen.net/badge/Who's/using/green)](../../issues)<br> [![github](https://badgen.net/badge/⭐/GitHub/blue)](https://github.com/doocs/md) [![gitee](https://badgen.net/badge/⭐/Gitee/blue)](https://gitee.com/doocs/md) [![license](https://badgen.net/github/license/doocs/md)](./LICENSE) [![release](https://img.shields.io/github/v/release/doocs/md.svg)](../../releases)

</div>

Expand All @@ -32,16 +32,18 @@ Markdown 文档自动即时渲染为微信图文,让你不再为微信文章

欢迎各位朋友随时提交 PR,让这款微信 Markdown 编辑器变得更好!如果你有新的想法,也欢迎在 Issues 区反馈。

## 图床支持
## 目前支持哪些图床

- [x] 默认图床
- [x] 自定义 GitHub 图床
- [x] 自定义阿里云 OSS
- [x] 自定义腾讯云 COS
| # | 图床 | 使用时是否需要配置 | 备注 |
|---|---|---|---|
| 1 | 默认图床 || - |
| 2 | GitHub 图床 | 配置 `Repo``Token` 参数 | [如何获取 GitHub token?](https://docs.github.com/en/github/authenticating-to-github/creating-a-personal-access-token) |
| 3 | 阿里云 OSS | 配置 `AccessKey ID``AccessKey Secret``Bucket``Region` 等参数 | [如何使用阿里云 OSS?](https://help.aliyun.com/document_detail/31883.html) |
| 4 | 腾讯云 COS | 配置 `SecretId``SecretKey``Bucket``Region` 等参数 | [如何使用腾讯云 COS?](https://cloud.tencent.com/document/product/436/38484) |

## 功能特性

- [x] 支持黑夜模式
- [x] 支持浅色、暗黑模式
- [x] 支持 <kbd>Ctrl</kbd> + <kbd>F</kbd> 快速格式化文档
- [x] 支持 Markdown 所有基础语法
- [x] 支持单独进行字体、字号设置
Expand Down
54 changes: 24 additions & 30 deletions src/api/file.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {
const defaultConfig = {
username: 'filess',
repo: 'images',
method: 'put',
branch: 'master',
accessToken: [
'7715d7ca67b5d3837cfdoocsmde8c38421815aa423510af',
'c411415bf95dbe39625doocsmd5047ba9b7a2a6c9642abe',
Expand All @@ -27,67 +27,62 @@ function fileUpload(content, file) {
!imgHost && localStorage.setItem('imgHost', 'default');
switch (imgHost) {
case 'aliOSS':
return aliOSSUploadFile(content, file.name);
return aliOSSFileUpload(content, file.name);
case 'txCOS':
return txCOSUploadFile(file);
return txCOSFileUpload(file);
case 'github':
default:
return githubUploadFile(content, file.name);
return ghFileUpload(content, file.name);
}
}

function getDefaultConfig() {
function getGitHubCommonConfig(username, repo, branch, token) {
const date = new Date();
const dir = date.getFullYear() + '/' + (date.getMonth() + 1).toString().padStart(2, '0') + '/' + date.getDate().toString().padStart(2, '0');
const token = defaultConfig.accessToken[Math.floor(Math.random() * defaultConfig.accessToken.length)].replace('doocsmd', '');
return {
method: defaultConfig.method,
method: 'put',
headers: {
'Authorization': 'token ' + token
},
url: `https://api.github.com/repos/${defaultConfig.username}/${defaultConfig.repo}/contents/${dir}/`
branch: branch,
url: `https://api.github.com/repos/${username}/${repo}/contents/${dir}/`
};
}

function getDefaultConfig() {
const token = defaultConfig.accessToken[Math.floor(Math.random() * defaultConfig.accessToken.length)].replace('doocsmd', '');
return getGitHubCommonConfig(defaultConfig.username, defaultConfig.repo, defaultConfig.branch, token);
}

function getGitHubConfig() {
const date = new Date();
const dir = date.getFullYear() + '/' + (date.getMonth() + 1).toString().padStart(2, '0') + '/' + date.getDate().toString().padStart(2, '0');
const githubConfig = JSON.parse(localStorage.getItem("githubConfig"));
const repoUrl = githubConfig.repo.replace("https://github.com/", "").replace("http://github.com/", "").replace("github.com/", "").split("/");
const username = repoUrl[0];
const repo = repoUrl[1];

return {
method: 'put',
headers: {
'Authorization': 'token ' + githubConfig.accessToken
},
url: `https://api.github.com/repos/${username}/${repo}/contents/${dir}/`
};
return getGitHubCommonConfig(username, repo, githubConfig.branch, githubConfig.accessToken);
}

function githubUploadFile(content, filename) {
async function ghFileUpload(content, filename) {
const isDefault = localStorage.getItem('imgHost') !== 'github';
const config = isDefault ? getDefaultConfig() : getGitHubConfig();
const dateFilename = new Date().getTime() + '-' + uuidv4() + '.' + filename.split('.')[1];

return fetch({
const res = await fetch({
url: config.url + dateFilename,
method: config.method,
headers: config.headers,
data: {
branch: config.branch || 'master',
message: 'Upload by https://doocs.github.io/md',
content: content
}
}).then(res => {
const githubResourceUrl = 'raw.githubusercontent.com/filess/images/master/';
const cdnResourceUrl = 'cdn.jsdelivr.net/gh/filess/images/';
return isDefault ? res.content.download_url.replace(githubResourceUrl, cdnResourceUrl) : res.content.download_url;
});
const githubResourceUrl = 'raw.githubusercontent.com/filess/images/master/';
const cdnResourceUrl = 'cdn.jsdelivr.net/gh/filess/images/';
return isDefault ? res.content.download_url.replace(githubResourceUrl, cdnResourceUrl) : res.content.download_url;

}

function aliOSSUploadFile(content, filename) {
async function aliOSSFileUpload(content, filename) {
const dateFilename = new Date().getTime() + '-' + uuidv4() + '.' + filename.split('.')[1];
const aliOSSConfig = JSON.parse(localStorage.getItem('aliOSSConfig'));
const buffer = Buffer(content, 'base64');
Expand All @@ -99,15 +94,14 @@ function aliOSSUploadFile(content, filename) {
accessKeyId: aliOSSConfig.accessKeyId,
accessKeySecret: aliOSSConfig.accessKeySecret
});
return client.put(dir, buffer).then(res => {
return res.url;
})
const res = await client.put(dir, buffer);
return res.url;
} catch (e) {
return Promise.reject(e);
}
}

function txCOSUploadFile(file) {
async function txCOSFileUpload(file) {
const dateFilename = new Date().getTime() + '-' + uuidv4() + '.' + file.name.split('.')[1];
const txCOSConfig = JSON.parse(localStorage.getItem('txCOSConfig'));
const cos = new COS({
Expand Down
12 changes: 8 additions & 4 deletions src/components/CodemirrorEditor/uploadImgDialog.vue
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,15 @@
<el-form-item label="GitHub 仓库" :required="true">
<el-input v-model.trim="formGitHub.repo" placeholder="如:github.com/yanglbme/resource"></el-input>
</el-form-item>
<el-form-item label="token" :required="true">
<el-form-item label="分支">
<el-input v-model.trim="formGitHub.branch" placeholder="如:release,可不填,默认 master"></el-input>
</el-form-item>
<el-form-item label="Token" :required="true">
<el-input v-model.trim="formGitHub.accessToken" show-password
placeholder="如:cc1d0c1426d0fd0902bd2d7184b14da61b8abc46"></el-input>
<el-link type="primary"
href="https://docs.github.com/en/github/authenticating-to-github/creating-a-personal-access-token"
target="_blank">如何获取 GitHub token?</el-link>
target="_blank">如何获取 GitHub Token?</el-link>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="saveGitHubConfiguration">保存配置</el-button>
Expand All @@ -52,7 +55,7 @@
</el-form-item>
<el-form-item label="存储路径">
<el-input v-model.trim="formAliOSS.path"
placeholder="如:img"></el-input>
placeholder="如:img,可不填,默认根目录"></el-input>
<el-link type="primary"
href="https://help.aliyun.com/document_detail/31883.html"
target="_blank">如何使用阿里云 OSS?</el-link>
Expand Down Expand Up @@ -81,7 +84,7 @@
</el-form-item>
<el-form-item label="存储路径">
<el-input v-model.trim="formTxCOS.path"
placeholder="如:img"></el-input>
placeholder="如:img,可不填,默认根目录"></el-input>
<el-link type="primary"
href="https://cloud.tencent.com/document/product/436/38484"
target="_blank">如何使用腾讯云 COS?</el-link>
Expand Down Expand Up @@ -111,6 +114,7 @@ export default {
return {
formGitHub: {
repo: "",
branch: "",
accessToken: "",
},
formAliOSS: {
Expand Down

0 comments on commit 68ab146

Please sign in to comment.