feat: update uploadImgDialog component

更新图床组件
2024-11-24 19:10:34 +08:00 · 2020-09-16 20:59:19 +08:00 · 2020-09-16 20:59:19 +08:00 · 68ab146167
commit 68ab146167
parent e6a2dc33d7
3 changed files with 47 additions and 47 deletions
--- a/README.md
+++ b/README.md
@ -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>

@ -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] 支持单独进行字体、字号设置
--- 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({
--- a/src/components/CodemirrorEditor/uploadImgDialog.vue
+++ b/src/components/CodemirrorEditor/uploadImgDialog.vue
@ -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>
@ -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>
@ -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>
@ -111,6 +114,7 @@ export default {
        return {
            formGitHub: {
                repo: "",
+                branch: "",
                accessToken: "",
            },
            formAliOSS: {