From 68ab146167d2f1402b3286b5c4f6a9c4d1cd38d9 Mon Sep 17 00:00:00 2001 From: yanglbme Date: Wed, 16 Sep 2020 20:59:19 +0800 Subject: [PATCH] feat: update uploadImgDialog component MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 更新图床组件 --- README.md | 16 +++-- src/api/file.js | 66 +++++++++---------- .../CodemirrorEditor/uploadImgDialog.vue | 12 ++-- 3 files changed, 47 insertions(+), 47 deletions(-) diff --git a/README.md b/README.md index 227cdb8..63308f2 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@
-[![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)
[![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)
[![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)
@@ -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] 支持 Ctrl + F 快速格式化文档 - [x] 支持 Markdown 所有基础语法 - [x] 支持单独进行字体、字号设置 diff --git a/src/api/file.js b/src/api/file.js index 97c3739..e0c1a49 100644 --- a/src/api/file.js +++ b/src/api/file.js @@ -9,7 +9,7 @@ import { const defaultConfig = { username: 'filess', repo: 'images', - method: 'put', + branch: 'master', accessToken: [ '7715d7ca67b5d3837cfdoocsmde8c38421815aa423510af', 'c411415bf95dbe39625doocsmd5047ba9b7a2a6c9642abe', @@ -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, - headers: { - 'Authorization': 'token ' + token - }, - url: `https://api.github.com/repos/${defaultConfig.username}/${defaultConfig.repo}/contents/${dir}/` - }; -} - -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 + 'Authorization': 'token ' + token }, + branch: branch, url: `https://api.github.com/repos/${username}/${repo}/contents/${dir}/` }; } -function githubUploadFile(content, filename) { +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 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 getGitHubCommonConfig(username, repo, githubConfig.branch, githubConfig.accessToken); +} + +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'); @@ -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({ diff --git a/src/components/CodemirrorEditor/uploadImgDialog.vue b/src/components/CodemirrorEditor/uploadImgDialog.vue index 5dc70b2..d623948 100644 --- a/src/components/CodemirrorEditor/uploadImgDialog.vue +++ b/src/components/CodemirrorEditor/uploadImgDialog.vue @@ -21,12 +21,15 @@ - + + + + 如何获取 GitHub token？ + target="_blank">如何获取 GitHub Token？ 保存配置 @@ -52,7 +55,7 @@ + placeholder="如：img，可不填，默认根目录"> 如何使用阿里云 OSS？ @@ -81,7 +84,7 @@ + placeholder="如：img，可不填，默认根目录"> 如何使用腾讯云 COS？ @@ -111,6 +114,7 @@ export default { return { formGitHub: { repo: "", + branch: "", accessToken: "", }, formAliOSS: {