使用gitee作為圖床編寫markdown自動上傳文件

本文轉載自查看原文 2020-01-15 15:48 1012 JAVA/ 使用碼雲創建圖床/ 免費圖床

使用gitee作為圖床編寫markdown自動上傳文件

gitee

github 對於大家來說肯定不陌生了，相信大家也使用過githubpage服務搭建過自己的博客或者靜態頁面部署。
gitee 和github是一樣的，都是代碼倉庫。同樣的gitee也為我們提供了GitPages服務。和github不一樣的是，
gitee可以創建多個Pages，我們可以用來創建自己的博客，也可以用來放置一些靜態文件進行訪問。下面我們就利用giteePages服務創建一個自己的遠程圖床服務。

為什么要做個人圖床

我主要是因為以下幾個原因：

服務器硬盤存儲空間太小，將博客中的圖片或者一些靜態資源放到服務器上太占用空間了
轉發其他平台的博客或者同步微信公眾號的文章，圖片進行了防盜鏈操作，無法進行正常展示
gitee免費

開始搞吧

主頁地址： gitee

准備工作

注冊登錄碼雲

你需要一個賬號，注冊登錄碼雲平台

碼雲的官網地址： gitee

創建倉庫

創建一個新的倉庫，這個倉庫就是保存圖片的倉庫了

注意這里要選擇公開

創建成功之后，獲取你的倉庫git地址：

這個地方后續開發中會用到，一定要記得哦

https://gitee.com/quxuecx/TypechoBlogImg.git
quxuecx: 用戶標識
TypechoBlogImg: 倉庫名稱

手動創建giteepages服務

注意：這里可以不需要進行手動創建，建議手動創建一下，主要是用來獲取giteepage的訪問地址

部署成功

記得你的地址，后續開發中會用到

創建私人令牌

創建一個私人秘鑰 這個秘鑰一定要注意保存

創建私人令牌

開始開發

碼雲OpenAPI ：
https://gitee.com/api/v5/swagger

我們這里主要使用到了

倉庫 > 新建文件：
https://gitee.com/api/v5/swagger#/postV5ReposOwnerRepoContentsPath

參數列表：點擊下方的測試按鈕，可以查看到請求地址

請求建立Pages --> 刷新倉庫的giteePages服務

碼代碼

代碼基本上沒有什么邏輯，通過http協議請求碼雲的api就好了。下面是后端java代碼分享

常量管理類

GiteeImgBedConstant.java


/**
 * 碼雲博客圖床的常量類
 *
 * @author: pyfysf
 * <p>
 * @qq: 337081267
 * <p>
 * @CSDN: http://blog.csdn.net/pyfysf
 * <p>
 * @blog: http://wintp.top
 * <p>
 * @email: pyfysf@163.com
 * <p>
 * @time: 2019/12/8
 */
public interface GiteeImgBedConstant {
    /**
     * TODO：這個常量是碼雲為您分配的私人令牌，Token  這里的代碼會報錯，僅僅是為了提醒您進行修改
     */
    String ACCESS_TOKEN = 

    /**
     * 倉庫所屬地址  這個是您的私人用戶名 具體請參考創建倉庫時的注意事項
     */
    String OWNER = 
    /**
     * TODO：倉庫名稱  這里是您的倉庫名稱
     */
    String REPO_NAME = 
    /**
     * TODO： 上傳圖片的message
     */
    String CREATE_REPOS_MESSAGE = "add img";
    /**
     * TODO：文件前綴
     */
    String IMG_FILE_DEST_PATH = "/img/" + DateUtil.format(new Date(), "yyyy_MM_dd") + "/";

    /**
     * 新建文件
     * <p>
     * owner*   倉庫所屬空間地址(企業、組織或個人的地址path)
     * repo*    倉庫路徑
     * path*    文件的路徑
     * content* 文件內容, 要用 base64 編碼
     * message* 提交信息
     * <p>
     * %s =>倉庫所屬空間地址(企業、組織或個人的地址path)  (owner)
     * %s => 倉庫路徑(repo)
     * %s => 文件的路徑(path)
     */
    String CREATE_REPOS_URL = "https://gitee.com/api/v5/repos/%s/%s/contents/%s";
    /**
     * 請求建立page  如果建立了，可以刷新
     * <p>
     * owner*  倉庫所屬空間地址(企業、組織或個人的地址path)
     * repo*    倉庫
     */
    String BUILD_PAGE_URL = "https://gitee.com/api/v5/repos/%s/%s/pages/builds";
    /**
     * TODO： gitpage請求路徑
     * 示例："http://quxuecx.gitee.io/typechoblogimg/";
     */
    String GITPAGE_REQUEST_URL = 

}

GiteeBlogImgMController.java



import org.springframework.transaction.annotation.Transactional;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import java.util.HashMap;
import java.util.Map;

import cn.hutool.core.codec.Base64;
import cn.hutool.core.util.IdUtil;
import cn.hutool.http.HttpUtil;
import cn.hutool.json.JSONObject;
import cn.hutool.json.JSONUtil;
import io.swagger.annotations.Api;
import lombok.extern.slf4j.Slf4j;
import top.wintp.upuptopboot.common.constant.GiteeImgBedConstant;
import top.wintp.upuptopboot.common.utils.ResultUtil;
import top.wintp.upuptopboot.common.vo.Result;



@Slf4j
@RestController
@Api(description = "碼雲博客圖床管理接口")
@RequestMapping("/api/giteeBlogImg")
@Transactional
public class GiteeBlogImgMController {

    @RequestMapping("saveImg")
    @ResponseBody
    public Result<Map<String, Object>> saveImg(@RequestParam(value = "imgFile", required = true) MultipartFile imgFile) throws Exception {
        Result<Map<String, Object>> result = ResultUtil.success("請求成功");

        Map<String, Object> resultMap = new HashMap<String, Object>();

        String trueFileName = imgFile.getOriginalFilename();

        assert trueFileName != null;
        String suffix = trueFileName.substring(trueFileName.lastIndexOf("."));

        String fileName = System.currentTimeMillis() + "_" + IdUtil.randomUUID() + suffix;


        String paramImgFile = Base64.encode(imgFile.getBytes());

        //轉存到gitee
        Map<String, Object> paramMap = new HashMap<>();
        paramMap.put("access_token", GiteeImgBedConstant.ACCESS_TOKEN);
        paramMap.put("message", GiteeImgBedConstant.CREATE_REPOS_MESSAGE);
        paramMap.put("content", paramImgFile);

        String targetDir = GiteeImgBedConstant.IMG_FILE_DEST_PATH + fileName;
        String requestUrl = String.format(GiteeImgBedConstant.CREATE_REPOS_URL, GiteeImgBedConstant.OWNER, 
        GiteeImgBedConstant.REPO_NAME, targetDir);

        System.out.println(requestUrl);


        String resultJson = HttpUtil.post(requestUrl, paramMap);

        JSONObject jsonObject = JSONUtil.parseObj(resultJson);
        if (jsonObject.getObj("commit") != null) {
            String resultImgUrl = GiteeImgBedConstant.GITPAGE_REQUEST_URL + targetDir;
            resultMap.put("resultImgUrl", resultImgUrl);
            System.out.println(resultJson);
            result.setCode(200);
        } else {
            result.setCode(400);
        }
        result.setResult(resultMap);

        return result;
    }

    @RequestMapping("refreshPage")
    @ResponseBody
    public Result<Object> refreshPage() throws Exception {
        Result<Object> result = ResultUtil.success("成功");

        Map<String, Object> paramMap = new HashMap<>();
        paramMap.put("access_token", GiteeImgBedConstant.ACCESS_TOKEN);

        String requestUrl = String.format(GiteeImgBedConstant.BUILD_PAGE_URL,
                GiteeImgBedConstant.OWNER, GiteeImgBedConstant.REPO_NAME);

        System.out.println(requestUrl);

        Map<String, Object> resultMap = new HashMap<>();
        String resultJson = HttpUtil.post(requestUrl, paramMap);

        JSONObject jsonObject = JSONUtil.parseObj(resultJson);
        if (jsonObject.getStr("status") != null) {
            String notice = jsonObject.getStr("notice");
            if (notice != null) {
                if ("Deployed frequently".equalsIgnoreCase(notice)) {
                    resultMap.put("message", "部署頻繁");
                    result.setCode(404);
                } else {
                    resultMap.put("message", "其他錯誤");
                }
                result.setCode(404);

            }
        } else {
            result.setCode(200);
        }


        System.out.println(resultJson);

        return result;
    }


}

Result類：

@Data
public class Result<T> implements Serializable{

    private static final long serialVersionUID = 1L;

    /**
     * 成功標志
     */
    private boolean success;

    /**
     * 消息
     */
    private String message;

    /**
     * 返回代碼
     */
    private Integer code;

    /**
     * 時間戳
     */
    private long timestamp = System.currentTimeMillis();

    /**
     * 結果對象
     */
    private T result;
}

關於代碼說明：里面所用到的工具包在Hutool中，具體的import已在博文中提供。如遇到問題，歡迎加我好友哦~ QQ：337081267

后端代碼就這樣愉快的結束了……

前端代碼分享

html版本（基於 EditorMD)

最終結果預覽

實現功能：

markdown博文編輯以及展示
粘貼剪切板圖片上傳至碼雲圖床（這里注意：為了避免碼雲page刷新頻繁，建議編輯文章結束之后再次使用刷新圖床服務）

主要代碼：


//監聽粘貼服務
function parser() {
    document.getElementById('test-editormd').addEventListener('paste', function ($event) {
            var template = {
                array: ($event.clipboardData || $event.originalEvent.clipboardData).items,
                blob: null,
                url: null
            }

            for (var key in template.array) {
                var val = template.array[key];
                if (val.kind === 'file') {
                    template.blob = val.getAsFile();
                    if (template.blob) {
                        //相應ajax等上傳代碼

                        var data = new FormData();
                        data.append('imgFile', template.blob);

                        $.ajax({
                            type: 'POST',
                            url: "",
                            data: data,
                            cache: false,
                            processData: false,
                            contentType: false,
                            success: function (res) {
                                console.log(res);

                                if (res.code === 200) {
                                    let resultImgUrl = res.result.resultImgUrl;
                                    testEditor.insertValue("![](" + resultImgUrl + ")")
                                    layer.msg("圖片上傳成功了，記得最后要刷新圖床哦，避免頻繁刷新哦！")
                                } else {
                                    layer.msg("圖片上傳失敗了，請重試")
                                }

                            }
                        });
                    }
                }


            }

        }
    )
}


//刷新圖床服務
$("#refreshPage").bind("click", function () {
            $.ajax({
                type: 'POST',
                url: "http://api.mptask.wintp.top/api/giteeBlogImg/refreshPage",
                data: {},
                cache: false,
                processData: false,
                contentType: false,
                success: function (res) {
                    console.log(res);
                    if (res.code === 200) {
                        layer.msg("刷新成功")
                    } else {
                        let message = res.result.message
                        layer.msg(message)
                    }

                }
            });
        });

全量代碼分享：

github --> https://github.com/upuptop/EditBlogByGitee/tree/master

vue版本（基於vue-meditor）


<template>
  <div class="markdown">
    <Markdown
      @on-upload-image="uploadImg"
      @on-paste-image="pasteImg"
      @on-save="save"
      @on-ready="ready"/>
  </div>
</template>

<script>
  import Markdown from 'vue-meditor';

  export default {
    name: "markdown",
    components: {
      Markdown
    },
    methods: {
      ready(param) {
        console.log(":ready");
        console.log(param);

      },

      save(param) {
        console.log(":save");
        console.log(param);

      },
  
      pasteImg(param) {
        console.log(":pasteImg");
        console.log(param);
        
        //在這里可以監聽到剪切板粘貼圖片的事件 在這里調用后台接口即可
        
        let fileName = param.fileName;


        let reqParam = new FormData() //創建form對象
        reqParam.append('imgFile', param)//通過append向form對象添加數據

        let config = {

        }

    
        this.axios.post('', reqParam, config).then(res => {
          console.log(res)


        }).catch(res => {
          console.log(res)
        })

      }
    }
  }
</script>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Markdown工具Typora結合gitee碼雲圖床自動上傳雲端圖片 Typora + PicGo + Gitee 實現圖片自動上傳到圖床 typora + picgo + gitee 實現寫博客自動上傳到免費圖床（外鏈調用圖片） Picgo + Gitee +Typora（自動上傳）搭建markdown免費圖庫 Typora圖床設置（阿里雲版，圖片自動上傳） Typora配置圖片自動上傳到圖床 Typora配置圖片自動上傳到圖床 MacOS Typora集成SM.SM圖床實現自動上傳圖片 windows下typora圖片自動上傳到圖床（附帶騰訊雲教程） Typora編寫markdown插入本地圖片時自動上傳圖片到博客園

使用gitee作為圖床 編寫markdown自動上傳文件

使用gitee作為圖床 編寫markdown自動上傳文件

gitee

為什么要做個人圖床

開始搞吧

准備工作

注冊登錄碼雲

創建倉庫

手動創建giteepages服務

創建私人令牌

開始開發

碼代碼

常量管理類

前端代碼分享

html版本 （基於 EditorMD)

vue版本（基於vue-meditor）

免責聲明！

使用gitee作為圖床編寫markdown自動上傳文件

使用gitee作為圖床編寫markdown自動上傳文件

html版本（基於 EditorMD)