Merge pull request #38 from doocs/feat_gitee-upload_20201112

feat: support gitee uploader

README.md

@@ -48,9 +48,10 @@ Markdown 文档自动即时渲染为微信图文，让你不再为微信文章
 | --- | ----------- | ------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------- |
 | 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)                                             |
+| 3   | Gitee 图床  | 配置 `Repo`、`Token` 参数                                          | 不支持上传超过 1MB 的图片                                                                                              |
-| 4   | 腾讯云 COS  | 配置 `SecretId`、`SecretKey`、`Bucket`、`Region` 等参数            | [如何使用腾讯云 COS？](https://cloud.tencent.com/document/product/436/38484)                                           |
+| 4   | 阿里云 OSS  | 配置 `AccessKey ID`、`AccessKey Secret`、`Bucket`、`Region` 等参数 | [如何使用阿里云 OSS？](https://help.aliyun.com/document_detail/31883.html)                                             |
-| 5   | 七牛云 Kodo | 配置 `AccessKey`、`SecretKey`、`Bucket`、`Domain`、`Region` 等参数 | [如何使用七牛云 Kodo？](https://developer.qiniu.com/kodo)                                                              |
+| 5   | 腾讯云 COS  | 配置 `SecretId`、`SecretKey`、`Bucket`、`Region` 等参数            | [如何使用腾讯云 COS？](https://cloud.tencent.com/document/product/436/38484)                                           |
+| 6   | 七牛云 Kodo | 配置 `AccessKey`、`SecretKey`、`Bucket`、`Domain`、`Region` 等参数 | [如何使用七牛云 Kodo？](https://developer.qiniu.com/kodo)                                                              |
 
 ![select-and-change-color-theme](./public/assets/images/select-and-change-color-theme.gif)
 

src/api/file.js

@@ -33,6 +33,8 @@ function fileUpload(content, file) {
             return txCOSFileUpload(file);
         case "qiniu":
             return qiniuUpload(file);
+        case "gitee":
+            return giteeUpload(content, file.name);
         case "github":
         default:
             return ghFileUpload(content, file.name);
@@ -116,6 +118,37 @@ async function ghFileUpload(content, filename) {
         : res.content.download_url;
 }
 
+async function giteeUpload(content, filename) {
+    const giteeConfig = JSON.parse(localStorage.getItem("giteeConfig"));
+    const repoUrl = giteeConfig.repo
+        .replace("https://gitee.com/", "")
+        .replace("http://gitee.com/", "")
+        .replace("gitee.com/", "")
+        .split("/");
+    const username = repoUrl[0];
+    const repo = repoUrl[1];
+    const date = new Date();
+    const dir =
+        date.getFullYear() +
+        "/" +
+        (date.getMonth() + 1).toString().padStart(2, "0") +
+        "/" +
+        date.getDate().toString().padStart(2, "0");
+    const dateFilename =
+        new Date().getTime() + "-" + uuidv4() + "." + filename.split(".")[1];
+    const res = await fetch({
+        url: `https://gitee.com/api/v5/repos/${username}/${repo}/contents/${dir}/${dateFilename}`,
+        method: "POST",
+        data: {
+            access_token: giteeConfig.accessToken,
+            branch: giteeConfig.branch || "master",
+            content: content,
+            message: `Upload by ${window.location.href}`,
+        },
+    });
+    return encodeURI(res.content.download_url);
+}
+
 async function aliOSSFileUpload(content, filename) {
     const dateFilename =
         new Date().getTime() + "-" + uuidv4() + "." + filename.split(".")[1];

src/components/CodemirrorEditor/uploadImgDialog.vue

@@ -81,6 +81,49 @@
                     </el-form-item>
                 </el-form>
             </el-tab-pane>
+            <el-tab-pane class="github-panel" label="Gitee 图床" name="gitee">
+                <el-form
+                    class="setting-form"
+                    ref="form"
+                    :model="formGitee"
+                    label-position="right"
+                    label-width="140px"
+                >
+                    <el-form-item label="Gitee 仓库" :required="true">
+                        <el-input
+                            v-model.trim="formGitee.repo"
+                            placeholder="如：gitee.com/yanglbme/resource"
+                        ></el-input>
+                    </el-form-item>
+                    <el-form-item label="分支">
+                        <el-input
+                            v-model.trim="formGitee.branch"
+                            placeholder="如：release，可不填，默认 master"
+                        ></el-input>
+                    </el-form-item>
+                    <el-form-item label="私人令牌" :required="true">
+                        <el-input
+                            v-model.trim="formGitee.accessToken"
+                            show-password
+                            placeholder="如：cc1d0c1426d0fd0902bd2d7184b14da61b8abc46"
+                        ></el-input>
+                        <el-link
+                            type="primary"
+                            href="https://gitee.com/profile/personal_access_tokens"
+                            target="_blank"
+                            >请在
+                            Gitee「设置->安全设置->私人令牌」中生成</el-link
+                        >
+                    </el-form-item>
+                    <el-form-item>
+                        <el-button
+                            type="primary"
+                            @click="saveGiteeConfiguration"
+                            >保存配置</el-button
+                        >
+                    </el-form-item>
+                </el-form>
+            </el-tab-pane>
             <el-tab-pane class="github-panel" label="阿里云 OSS" name="aliOSS">
                 <el-form
                     class="setting-form"
@@ -282,6 +325,11 @@ export default {
                 branch: "",
                 accessToken: "",
             },
+            formGitee: {
+                repo: "",
+                branch: "",
+                accessToken: "",
+            },
             formAliOSS: {
                 accessKeyId: "",
                 accessKeySecret: "",
@@ -314,6 +362,10 @@ export default {
                     value: "github",
                     label: "GitHub",
                 },
+                {
+                    value: "gitee",
+                    label: "Gitee",
+                },
                 {
                     value: "aliOSS",
                     label: "阿里云",
@@ -335,6 +387,9 @@ export default {
         if (localStorage.getItem("githubConfig")) {
             this.formGitHub = JSON.parse(localStorage.getItem("githubConfig"));
         }
+        if (localStorage.getItem("giteeConfig")) {
+            this.formGitee = JSON.parse(localStorage.getItem("giteeConfig"));
+        }
         if (localStorage.getItem("aliOSSConfig")) {
             this.formAliOSS = JSON.parse(localStorage.getItem("aliOSSConfig"));
         }
@@ -375,6 +430,24 @@ export default {
                 type: "success",
             });
         },
+        saveGiteeConfiguration() {
+            if (!(this.formGitee.repo && this.formGitee.accessToken)) {
+                const blankElement = this.formGitee.repo
+                    ? "私人令牌"
+                    : "Gitee 仓库";
+                this.$message({
+                    showClose: true,
+                    message: `参数「​${blankElement}」不能为空`,
+                    type: "error",
+                });
+                return;
+            }
+            localStorage.setItem("giteeConfig", JSON.stringify(this.formGitee));
+            this.$message({
+                message: "保存成功",
+                type: "success",
+            });
+        },
         saveAliOSSConfiguration() {
             if (
                 !(
@@ -480,6 +553,11 @@ export default {
                         this.formGitHub.repo && this.formGitHub.accessToken;
                     errMessage = checkRes ? "" : "请先配置 GitHub 图床参数";
                     break;
+                case "gitee":
+                    checkRes =
+                        this.formGitee.repo && this.formGitee.accessToken;
+                    errMessage = checkRes ? "" : "请先配置 Gitee 图床参数";
+                    break;
                 case "aliOSS":
                     checkRes =
                         this.formAliOSS.accessKeyId &&