Picgo上传到GitHub莫名其妙的出错后，我选择自己实现上传功能

正好前两天在nb学长的帮助教育下用过GitHub上传文件的api，所以用起来也是轻车熟路了。
这不是教程，只是给出一个参考。另外，picgo很好用，就是我用不好。

过程

我引用了jquery

<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

首先要有一个可以上传文件的按钮（或者其他之类的）

<input type="file" accept="image/png,image/gif,image/jpeg">

accept里面填入的就是选择文件的时候可选的格式，如果不填默认所有都可以

但是这个按钮的样式，不是怎么好看，所以可以改成这样

<div style="font-size: 30px;display: inline; cursor: pointer" onclick="myimg.click()">🚢</div>
<input type="file" id="myimg" style="visibility: hidden;" accept="image/png,image/gif,image/jpeg">

先把这个文件选择的按钮通过visibility: hidden;隐藏起来，然后通过另一个元素的onclick事件模拟点击了选择文件的按钮，这样就会很好看。🚢这个你可以随意更换为你想要的。

选择文件的弄好了，接着就是上传了。
GitHub的api说必须将文件转换成base64编码的格式才支持上传，所以我们首先要把选择的图片转换为base64编码的形式，然后直接调用api上传既可。
但是base64我们还得处理一下，因为转换出来的前面会带着data一些属性，用正则（nb学长帮我搞的）直接把前面的去掉，然后用substring获得图片本来的格式。
这里我是用时间戳重命名图片的，很随意，如果你要用别的也可以

function uploadimg(file){
      var timestamp=new Date().getTime();//获取时间戳
      var nameofimg=timestamp+"."+houzhui;//以事件戳重命名
      var picurl="https://cdn.jsdelivr.net/gh/“GitHub用户名”/“GitHub存放图片的仓库名”/"+nameofimg;
    var settings = {
    "url": "https://api.github.com/repos/“GitHub用户名”/“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="Markdown:![]("+picurl+")";//markdown格式的链接
        url="Imgurl:"+picurl;//图片原链接
        my="My:{% fb_img "+picurl+"  "+nameofimg+" %}";//自定义的格式，这里是我的自定义
        var final="<li>"+imgurlmd+"</li>"+"<li>"+url+"</li>"+"<li>"+my+"</li>";
        document.getElementById("neirong").innerHTML=final;//写道html里面
    });
}
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]);
}

以上代码中用“”包含的都是你自己的信息

上传的代码有了，再将上传代码的函数和选择文件弄在一起，然后为返回的链接找一个位置就好了

<div style="font-size: 30px;display: inline; cursor: pointer" onclick="myimg.click()">🚢</div>
<div id="neirong"></div>
<input type="file" id="myimg" onchange="imgChange(this)" style="visibility: hidden;" accept="image/png,image/gif,image/jpeg">

这样就可以了~关于html页面可以根据自己的需要进行美化

完整代码

<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用户名”/“GitHub存放图片的仓库名”/"+nameofimg;
    var settings = {
    "url": "https://api.github.com/repos/“GitHub用户名”/“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="Markdown:![]("+picurl+")";//markdown格式的链接
        url="Imgurl:"+picurl;//图片原链接
        my="My:{% fb_img "+picurl+"  "+nameofimg+" %}";//自定义的格式，这里是我的自定义
        var final="<li>"+imgurlmd+"</li>"+"<li>"+url+"</li>"+"<li>"+my+"</li>";
        document.getElementById("neirong").innerHTML=final;//写道html里面
    });
}
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]);
}
</script>
<div style="font-size: 30px;display: inline; cursor: pointer" onclick="myimg.click()">🚢</div>
<div id="neirong"></div>
<input type="file" id="myimg" onchange="imgChange(this)" style="visibility: hidden;" accept="image/png,image/gif,image/jpeg">

好了，这样就完成了自己写一个页面替代picgo的功能了。

最后要说的话

这个页面可以本地使用，并且推荐本地使用。
如果你想让别人跟你一起使用并且想要上传到GitHub pages的话，你需要将你的token换一种形式存在于代码中，比如说加密。然后再解密然后使用。即不能让你的token以明文形式存在，否则会被GitHub检测到然后删除你的这个token以至于上传api出现权限不足的报错。
本地自己用就没那么多事啦~