本文首发于我的博客https://huanghaozi.cn,原链接
昨天在水群的时候发现群主为了方便管理,设置了群文件仅能由管理员上传。对于偌大的一个群来说确实能防止很多问题,不过有时也略显不方便,因此感觉自己发现了商机开发了一个这样的网页,也可以将其作为方便的对象存储使用。
Github Repo地址:https://github.com/huanghaozi/file2link
Demo地址:https://huanghaozi.cn/tools/file2link/uploader.html
思路简介
想法的产生
目前市面上有许多免费空间,它们大多数都仅支持PHP,所以作为一个贫穷的学生党,使用PHP进行开发也是可以理解的。
相信大家都知道Github这个平台,人人都可以在其中建立repo,且没有限制大小,相当于一个免费的对象存储了,不过由于服务器的位置问题,速度还是比较慢。
所以这里就用到了jsdelivr提供的免费CDN服务,仅需对github的链接作一下变换即可得到由jsdelivr加速的链接,其访问速度可以说是非常之快了。
由此便产生了使用php+Github+jsdelivr进行开发的想法
具体的思路
首先需要解决的是php调用Github API的问题。虽然笔者对php基本一窍不通,但是毕竟学过一些基础的编程,于是上来就找了一番Github官方的文档:https://developer.github.com/v3/guides/ ,此外我还对照参考了其他语言调用Github API上传文件的一些代码资料。
其中这一篇对github上传/更新文件的操作作了详细的讲解:https://developer.github.com/v3/repos/contents/
其次需要解决的是前端的问题,这方面比较容易,但时间消耗也比较大,为了好看,我使用了ZUI框架对界面进行了美化。
PHP上传文件
PHP可使用curl进行一些HTTP操作,上传文件主要用的是HTTP中的PUT请求,对此我随便搜了一个封装好的轮子:http://www.thisbug.com/archives/149
需要注意的是,调Github的API时需要在请求头headers中设置User-Agent为自己的用户名,还要设置Authorization为token附上自己在github的settings中生成的token。
前端构造
前端是一个HTML页面,内含一个打开文件的按钮和一个上传的按钮,并支持拖放功能。
点击打开文件按钮后,将会在页面中产生一个卡片,卡片内容为文件名,以及一个移除按钮,并将文件的base64编码、文件名存入js里的数组。
点击上传按钮后,会调用Ajax进行POST操作,将文件的base64编码及文件名传入PHP后台上传至Github的repo中,PHP后台处理成功后将返回一个经jsdelivr加速的文件链接,Ajax接收这一信息后继而将链接做成一个复制按钮放入对应的卡片中。
代码及成品
https://github.com/huanghaozi/file2link
https://huanghaozi.cn/tools/file2link/uploader.html
本篇文章由一文多发平台ArtiPub自动发布