起因

由于用Github和PicGo搭建的图床在后面使用过程中经常会出现服务器出错的提示导致半天一张图都传不上去。所以我努力地在网上搜索解决办法，但是都没有较好解决,倒是无意见发现了一个HTML上传图片到Github并获得使用连接的办法。然后经过改造得到了下图的结果

实现代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@600&display=swap">
<link href="https://myhkw.cn/static/plugins/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<style>
.btn-one {
    border-radius: 25px;
    display: inline-block;
    line-height: 1;
    border: 2px solid #777;
    font-weight: bold;
    letter-spacing: 1px;
    color: #777;
    font-family: Noto Serif SC;
    background: beige;
}
.btn-two {
    padding: 8px 24px;
    font-size: 17px;
    width: 800px;
    height: 30px;
    /* position: absolute; */
}

.btn-primary {
    border-radius: 25px;
    display: inline-block;
    line-height: 1;
    border: 2px solid #777;
    font-weight: bold;
    letter-spacing: 1px;
    color: #777;
    font-family: Noto Serif SC;
    background: linear-gradient(to right, #ffafbd, #ffc3a0);
}
.btn-xs {
    padding: 8px 24px;
    font-size: 17px;
    width: 900px;
    height: 370px;
}


a {
    color: #8129d2;
    outline: 0;
}

li{
    margin-bottom: 10px;
    margin-top: 10px;
}

body {
    position: fixed;
    z-index: -999;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #c0c0aa, #1cefff);
    background-attachment: local;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
}
button {
    border-radius: 10px;
    margin-left: 30px;
    font-family: Noto Serif SC;
    background: #b813d67a;
    border-style: none;
}

</style>
<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
function uploadimg(file){
    var timestamp=new Date().getTime();//获取时间戳
    var nameofimg=timestamp+"."+houzhui;//以事件戳重命名
    var picurl="https://cdn.jsdelivr.net/gh/Github账号名/仓库名/"+nameofimg;
    var settings = {
    "url": "https://api.github.com/repos/Github账号名/仓库名/contents/"+nameofimg,
    "method": "PUT",
    "timeout": 0,
    "headers": {
        "Authorization": "Bearer “这里填写Github的token”",
        "Content-Type": "text/plain"
    },
    "data": "{\r\n  \"message\": \"upload\",\r\n  \"content\": \""+ file +"\"\r\n}",
    };
    $.ajax(settings).done(function (response) {
        imgurlmd="![]("+picurl+")";//markdown格式的链接
        url="Imgurl:"+picurl;//图片原链接
        var final=imgurlmd;
        var finalone=picurl;
        var finaltwo="<a href='"+picurl+"' target='_blank'>"+picurl+"</a>";
        document.getElementById("neirong").innerHTML=final;//写道html里面
        document.getElementById("neirongone").innerHTML=finalone;
        document.getElementById("neirongtwo").innerHTML=finaltwo;
    });
}
function imgChange(img) {
    const reader = new FileReader();
    reader.onload = function (ev) {
        var imgFile =ev.target.result;//imgFile就是图片的base64编码
        base64url=imgFile.replace(/(.*)?,/,'');//用正则消除前面的data之类的字符
        // console.log(imgFile);
        houzhui = imgFile.substring( imgFile.indexOf("/") + 1, imgFile.indexOf(";") );//获取图片原本的格式
        uploadimg(base64url);//上传
    }
    reader.readAsDataURL(img.files[0]);
}

function execClick(){
    document.execCommand("copy");
}

function execCopy(event,thisDiv){
    if(isIE()){
        if(window.clipboardData){
            window.clipboardData.setData("Text", thisDiv.textContent);
            alert(window.clipboardData.getData("Text"));
        }
    }else{
        event.preventDefault();
        if (event.clipboardData) {
            event.clipboardData.setData("text/plain", thisDiv.textContent);
            alert(event.clipboardData.getData("text"));
        }
    }
}

function isIE(){
    var input = window.document.createElement ("input");
    //"!window.ActiveXObject" is evaluated to true in IE11
    if (window.ActiveXObject === undefined) return null;
    if (!window.XMLHttpRequest) return 6;
    if (!window.document.querySelector) return 7;
    if (!window.document.addEventListener) return 8;
    if (!window.atob) return 9;
    //"!window.document.body.dataset" is faster but the body is null when the DOM is not
    //ready. Anyway, an input tag needs to be created to check if IE is being
    //emulated
    if (!input.dataset) return 10;
    return 11;
}
</script>

</head>
<body>
<div style="text-align:center;margin-top:10%">
    <div class="btn btn-primary btn-xs btn-block">
        <div style="font-size: 30px;display: inline; cursor: pointer" onclick="myimg.click()">
            <i class=" fa fa-picture-o" style="color:#000">
              <span style="font-family: Noto Serif SC">点击上传图片</span>
            </i>
        </div>
        <div>
            <div id="thisDiv" onclick="execClick();" oncopy="execCopy(event,this);">
                <li id='neirong' class='btn-one btn-two'></li>
            </div>
            <button>点击上方复制</button>
        </div>
        <div>
           <div id="thisDiv" onclick="execClick();" oncopy="execCopy(event,this);">
             <li id='neirongone' class='btn-one btn-two'></li>
           </div>
           <button>点击上方复制</button>
        </div>
        <div>
        <li id='neirongtwo' class='btn-one btn-two'></li>
        <button>点击上方跳转</button>
        </div>
    </div>
</div>
<input type="file" id="myimg" onchange="imgChange(this)" style="visibility: hidden;">
</body>
</html>

上面78行到89行代码注意填写自己的Github仓库名和token