使用giteeは自動的に書き込みマークダウンマップのベッドとしてファイルをアップロード

その他 2020-01-15 16:24:52 訪問数: null

使用giteeは自動的に書き込みマークダウンマップのベッドとしてファイルをアップロード

gitee

私たちのすべてのためのgithubのは確かには見知らぬ人ではありません、私たちは、ビルドサービスgithubpage自身のブログや静的ページの展開に使用されていると信じています。
giteeとgithubのは同じで、コードのリポジトリです。同じgiteeはまた、私たちGitPagesサービスを提供しています。githubのとは、同じではありません
アクセスされた複数のページを作成することができ、私たちは自分のブログを作成するために使用できるgiteeが、また、いくつかの静的なファイルを配置するために使用することができます。ここでは、あなた自身のベッドのサービス利用giteePagesサービスのリモートビューを作成します。

なぜ個人的なマップのベッドを行います

主に以下の理由のI：

  • サーバーのハードディスク容量が小さすぎると、サーバー上のスペースにブログの写真や、いくつかの静的リソースがあまりにも
  • ブログや記事の他のプラットフォーム同期のマイクロチャネルのパブリック番号を転送、画像が正常なショーにすることはできません、盗難防止チェーンオペレーションました
  • gitee無料

我々はそれに従事し始めました

ホーム住所：gitee

準備

登録ログインコード雲

あなたはアカウントが必要、ログインコード登録クラウドプラットフォーム

クラウドコード公式ウェブサイトのアドレス：gitee

倉庫を作成します

新しい倉庫を作成し、倉庫は、倉庫の絵に保存されています

選択する公衆に注意してください。

成功を作成した後、あなたのgitリポジトリのアドレスを取得します：

この場所は、後続の開発に使用され、私たちはああそれを覚えておく必要があります

https://gitee.com/apk2sf/TypechoBlogImg.git
apk2sf：ユーザ識別
TypechoBlogImg：倉庫名

giteepagesサービスマニュアルの作成

注：手動で作成する必要はないが、それはそれを手動で作成することをお勧めします、主にアドレスgiteepageへのアクセスを得るために使用されています

成功した展開

あなたの住所を覚えて、その後の開発に使用されます

パーソナルトークンを作成します。

個人秘密鍵を作成、保存するために注意を払う必要があります。この秘密鍵のを

パーソナルトークンを作成します。

開発を始めました

码云OpenAPI ：
https://gitee.com/api/v5/swagger

我们这里主要使用到了

参数列表：点击下方的测试按钮，可以查看到请求地址

  • 请求建立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: [email protected]
 * <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://apk2sf.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>

おすすめ

転載: www.cnblogs.com/upuptop/p/12197125.html
おすすめ
LFOSSA Yuanlaisusu オープン コース | クラウド ネイティブの未来をマスターする: CNCF 認定資格と試験準備のヒントの包括的なガイド
ランキング
[ブリックジャワ]学ぶための5分、算術演算子
英国のエッセイを書くには、次の点に注意してください。
【質疑応答シリーズ】バックエンドから返されるjsonの出力をフォーマットし、コードを強調表示する方法
イベントが発生したYunqi 2019会議、？
非常に使いやすいAndroid 6.0の許可申請ツールを推奨
インターセプトし、使用にVueの-CLI3 axiosルート
CentOS Stream 9 でピーナッツ シェルをインストールして使用し、イントラネットに侵入して Web サイトを構築する方法
CreditEaseマイクロタスクスケジューリングサービスプラットフォームの構築の練習|シェアを記録
WrapPanelのWPFのレイアウト
keras 深層学習フレームワークは、畳み込みニューラル ネットワーク cnn を通じて手書き数字認識を実現します
アーカイブ
もっと
2024-04-26(22)
2024-04-25(31)
2024-04-24(30)
2024-04-23(31)
2024-04-22(5)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)
2024-04-17(31)

コードワールド

© 2018 codetd.com