feat: update uploadImgDialog component

更新图床组件

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
+| 1 | 默认图床 | 否 | - |
-- [x] 自定义腾讯云 COS
+| 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] 支持单独进行字体、字号设置

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];
-    
+    const res = await fetch({
-    return 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 => {
+        const res = await client.put(dir, buffer);
-            return res.url;
+        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({

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: {