网站首页 > 技术文章 正文
事情是这样的,某天我在项目里临时需要一个图片上传接口来测试功能,简单来说就是从前端上传图片到服务器然后返回一个可访问的静态资源链接,如果为了这个而去开发一个服务端接口实在是麻烦,而对接阿里云、七牛云这类 oss 服务一样要开发而且还要钱,许多免费在线图床也不会提供 API 的功能。。
于是我经过一番摸索,发现其实白嫖 Github 提供的 api 就可以不用服务器、不花一分钱,简单快速实现我要的上传接口,还自带 https 链接,下面就把详细的过程分享给大家。
0. 注册一个小号
先随便用一个邮箱注册个 Github 小号,注意不要使用你正式的 Github 账户,因为下面创建的 Token 如果做权限管控会比较麻烦,所以我们直接用一个小号来创建仓库,这样可以省去许多工作。
1. 创建 Token
登录你的小号(注意别登错了),访问:https://github.com/settings/tokens ,点击 Generate new token 按钮,创建一个新 Token:
设置一下过期时间,这里我们选择“不会过期”,然后勾选一下 repo 所有权限:
接着滚到底下点击生成按钮,会看到 Token 生成完毕:
记得复制,Github 不会保存 Token,页面关闭后不可查看。
2. 创建仓库
在小号里创建一个仓库,点击右上角 + 号:
填写仓库名例如:files,然后点击创建仓库:
创建好后可以看下浏览器的地址栏,把这段 URL 复制一下,这就是你的仓库 repo 名:
至此,我们创建了仓库以及访问令牌,这个小号就没什么作用了,你可以退出该账号。
3. 编写上传方法
做完前面的准备工作,就可以写一个图片上传接口了。
代码十分简单,这里用常见的 axios 作为网络请求库:
import axios from 'axios'
const repo = 'shawnphang/files' // 填你的仓库 repo
const cutToken = 'ghp_Znytm1Twnxobl' // 填你的 Token
const tailToken = '0Cp7BjWgKlLpa14opaEzL'
const uploader = async (content) => {
const d = new Date()
const path = `${d.getFullYear()}/${d.getMonth()}/${d.getTime()}${file.name?.split('.').pop() || '.png'}`
const imageUrl = 'https://api.github.com/repos/' + repo + '/contents/' + path
const body = { branch: 'main', message: 'upload', content, path }
const headers = {
Authorization: `token ${cutToken}${tailToken}`,
'Content-Type': 'application/json; charset=utf-8',
}
const res = await axios.put(imageUrl, body, { headers })
// 直接取得返回的图片地址
return res?.content?.download_url
// return `https://fastly.jsdelivr.net/gh/${repo}@main/${path}`
}
如果要使用 jsDelivr 免费加速访问,可以把 return 值改为上面的 https://fastly.jsdelivr.net/gh/${repo}@main/${path},但是似乎国内访问速度也是一般般。
注意这里的 Token 被我拆成了 cutToken 和 tailToken 两个字段再拼起来,是因为我的代码还要托管到 github 上,如果在代码里直接写出完整 Token 的话会被 github 识别到,然后就自动把你的 Token 从账户里删除了,如果你的代码不会 push 到 github 上,那么可以不用这么做。
4. 上传文件
有了以上方法我们就可以直接调用上传然后获得文件的路径,例如这样:
const imgUrl = await uploader(图片内容)
不过目前只支持上传 base64 格式内容,如果通过文件选择获取的 file 格式文件就不能直接上传了,可以用如下方法转换:
const reader = new FileReader()
function getBase64(file) {
return new Promise((resolve) => {
reader.onload = function (event) {
const fileContent = event.target.result
resolve(fileContent.split(',')[1])
}
reader.readAsDataURL(file)
})
}
例如我们有一个上传按钮:
<input type="file" onChange="selectFile" />
选择图片后上传则在事件回调中处理:
const selectFile = async (file) => {
const content = await getBase64(file)
const imgUrl = await uploader(content)
};
得到 imgUrl 即为返回图片访问地址例如 https://xxxx/xxx/xxx.png
结束
其实原理就是调用 github 的 api 来往仓库里提交文件,然后通过对应的 download_url 或 jsDelivr 节点就可以直接访问到了,访问和上传速度什么的肯定不是很理想,但是像我一样用来当小文件上传还是很不错的,完全省去开发成本,简单配置就能一劳永逸。
另外由于众所周知的原因,这个资源访问是不稳定的,只建议在开发环境中应急用,不能在生产项目中使用。
以上就是文章的全部内容了,感谢看到这里!如果觉得写得还不错,对你有所帮助或启发,别忘了点赞收藏关注“一键三连”哦~ 我是茶无味(公众号:品味前端),一名平凡的前端 Developer,希望与你共同成长~
- 上一篇: 我带的实习生竟然把图片直接存到了服务器上!崩溃了
- 下一篇: 基于业务场景下的图片/文件上传方案总结
猜你喜欢
- 2024-11-25 超强 Vue+Electron 图床上传工具PicGo
- 2024-11-25 JAVA全栈CMS系统vue图片/视频上传组件,多图上传及删除功能11
- 2024-11-25 SpringCloud+vue实现图片裁剪缩放上传
- 2024-11-25 Node.js实现将文字与图片合成技巧
- 2024-11-25 Nodejs之MEAN栈开发(四)-- form验证及图片上传
- 2024-11-25 基于业务场景下的图片/文件上传方案总结
- 2024-11-25 我带的实习生竟然把图片直接存到了服务器上!崩溃了
- 2024-11-25 Fabric.js 将本地图像上传到画布背景
- 2024-11-25 前端JS判断上传文件是否是图片
- 2024-11-25 LayUI+asp.net图片上传详解
你 发表评论:
欢迎- 599℃几个Oracle空值处理函数 oracle处理null值的函数
- 591℃Oracle分析函数之Lag和Lead()使用
- 579℃0497-如何将Kerberos的CDH6.1从Oracle JDK 1.8迁移至OpenJDK 1.8
- 575℃Oracle数据库的单、多行函数 oracle执行多个sql语句
- 571℃Oracle 12c PDB迁移(一) oracle迁移到oceanbase
- 564℃【数据统计分析】详解Oracle分组函数之CUBE
- 550℃最佳实践 | 提效 47 倍,制造业生产 Oracle 迁移替换
- 545℃Oracle有哪些常见的函数? oracle中常用的函数
- 最近发表
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端路由 (61)
- 前端数组 (73)
- 前端js面试题 (50)
- 前端定时器 (59)
- 前端懒加载 (49)
- 前端获取当前时间 (50)
- 前端接口 (50)
- Oracle RAC (76)
- oracle恢复 (77)
- oracle 删除表 (52)
- oracle 用户名 (80)
- oracle 工具 (55)
- oracle 内存 (55)
- oracle 导出表 (62)
- oracle 中文 (51)
- oracle的函数 (57)
- 前端调试 (52)
本文暂时没有评论,来添加一个吧(●'◡'●)