一步步带你通过Ajax+Github提供的api 实现前端剪切板图片上传

通过api上传文件

点我下载或在线使用Postman，推荐下载后使用。

在GitHub的api中，有关于文件上传的接口Create or update a file

api的url格式

PUT /repos/:owner/:repo/contents/:path

在Postman里面我们新建一个请求

首先改成PUT，然后输入url

https://api.github.com/repos/:owner/:repo/contents/:path

在body下使用raw添加信息(注意，GitHub的api强调必须把文件进行 base64 编码才能上传)

//这是官网上的示例，我们只需要用message和content即可
{
  "message": "my commit message",
  "committer": {
    "name": "Monalisa Octocat",
    "email": "octocat@github.com"
  },
  "content": "bXkgbmV3IGZpbGUgY29udGVudHM="
}
//可以拿下面这个做测试用
{
  "message": "test",
  "content": "aGVsbG8gd29ybGQ="
}

aGVsbG8gd29ybGQ=就是Hello world的base64编码后的形式

我们还需要一步验证，GitHub可以采用token验证。
点我生成GitHub的token，我们这里只需要读写权限即可。不需要更多别的了，注意这个token只出现一次，确保已经粘贴好了再关闭这个页面。

在Postman中的Authorization下的type选择OAuth 2.0，将你的token粘贴进去

然后send,如果成功的话（跟着上面的来就不会出错（应该不会）），Postman中的body中会是这样的

这个时候你在去你的上传的库中就可以看到你刚才上传的文件，比如说我这里是一个写着Hello world的readme.md

这就说明你成功通过api向GitHub传了文件

jquery代码

Postman支持自动生成访问api的代码。支持语言很多，这里我选择得时jquery的
如果你是上一步一起做过来的，直接生成代码就可自用。

var settings = {
  "url": "https://api.github.com/repos/Drew233/test/contents/test/readme.md",
  "method": "PUT",
  "timeout": 0,
  "headers": {
    "Authorization": "Bearer :Your token",
    "Content-Type": "text/plain"
  },
  "data": "{\r\n  \"message\": \"test\",\r\n  \"content\": \"aGVsbG8gd29ybGQ=\"\r\n}",
};
 
$.ajax(settings).done(function (response) {
  console.log(response);
});

通过观察我们不难发现

• url即上面我们访问的api的url
• Authorization中的Bearer后面就是我们的token
• data对应的就是官网中所给的发送api请求时候需要的信息

接听粘贴事件并将剪切板图片转换为base64编码后上传

function uploadimg(file){
  var settings = {
      "url": "",
      "method": "PUT",
      "timeout": 0,
      "async": true,
      "headers": {
        "Authorization": ,
        "Content-Type": "text/plain"
      },
      "data": "{\r\n  \"message\": \"" + window.location.host + "\",\r\n  \"content\": \"" + file + "\"\r\n}",
    };
    $.ajax(settings).done(function (response) {
        console.log(response);//response即为上传后返回的message
    });
}
document.addEventListener('paste', function (event) {//检测粘贴时间
  var items = event.clipboardData && event.clipboardData.items;
  var file = null;
  if (items && items.length) {
      // 检索剪切板items
      for (var i = 0; i < items.length; i++) {
          if (items[i].type.indexOf('image') !== -1) {
              file = items[i].getAsFile();
              var reader = new FileReader();
              reader.readAsDataURL(file);//将剪切板的图片文件转为base64编码
              reader.onload = function(){
                  base64url=reader.result.replace(/(.*)?,/,''); //通过正则表达式删除转换为base64编码后前面的部分提示信息
                  uploadimg(base64url);
              };
              break;
          }
      }
  }
});

填上对应的值即可使用。

起因 && 广告

为什么会接触到这个东西呢？因为最近弄的一个js（Artitalk）需要实现这个功能。
欢迎大家使用：Artitalk

一些需要注意的事

如果你要用这个功能并且把源码上传到GitHub pages，GitHub会自动检测到你的token然后将它删除（安全措施2333。
解决方法就是把token加密一下，然后调用的时候解密，亲测可行~