昨天在水群的时候发现群主为了方便管理,设置了群文件仅能由管理员上传。对于偌大的一个群来说确实能防止很多问题,不过有时也略显不方便,因此感觉自己发现了商机开发了一个这样的网页,也可以将其作为方便的对象存储使用。
思路简介
想法的产生
目前市面上有许多免费空间,它们大多数都仅支持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