作为全栈的前端开发,存储你一定不陌生,而且大概率是需要用到的元素,本文将直接了当的让你免费使用20G的存储,而且还支持api调用来实现文件的上传和下载功能。 这个工具叫做imagekit
免费版支持的功能
哎吆,永久免费计划哦,宝子们有福了,哈哈~
👉🏽计划包含,包括20GB 带宽、20GB 媒体存储、1000 个视频处理单元和500 个扩展单元。具体:
- 无限请求
- 无限的图像转换
- 图像、视频和媒体管理功能
- 使用情况分析
- 20GB 带宽、20GB 媒体存储、1000 个视频处理单元和500 个扩展单元
- 带有 72 小时 SLA 的电子邮件支持
你心动了吗?可以说作为日常开发来说,完全够用了。
界面介绍
先注册登录。
一般来说,左侧菜单,我们只需要关注3个即可,如下图所示:
分别是:
- 使用量分析
- 文件管理,上传、删除、下载
- 开发者api key管理,可在服务端进行文件的上传操作
手动上传
- 点击
media library
功能见截图:
你可以创建文件夹,上传单个文件,或者上传整个文件夹
- 支持的文件有:图片、视频、json、txt、pdf、word、excel、rp、html等等。如果不支持,上传会提示~
- 点击upload按钮即可上传
- 成功后,可以右键
小附件图标
进行文件的管理,比如下载、删除、复制url
以上是手动操作,还是很简单的~
通过服务端上传
申请API key
我之前申请过了,第一次,可以看到创建按钮,点创建后就会生成:
- ImagekitID(用户id)
- URL-endpoint(上传域名)
可以看到图中还贴心的提供了代码示例
文档地址
nujxt3示例
- .env
IMAGEKIT_PUBLIC="xxxxx"
IMAGEKIT_SECRET="xxxxxx"
- nuxt.config.ts
export default defineNuxtConfig({
// ...
runtimeConfig: {
imageKitPublickey: process.env.IMAGEKIT_PUBLIC,
imageKitPrivatekey: process.env.IMAGEKIT_SECRET,
imageKitUrlEndpoint: 'https://ik.imagekit.io/jerrywu001',
// ...
},
// ...
});
对应关系如下图:
- 多文件上传示例:
import ImageKit from 'imagekit';
export default defineEventHandler(async (event) => {
const { imageKitPublickey, imageKitPrivatekey, imageKitUrlEndpoint } = useRuntimeConfig();
const { files, blogId } = await readBody<{ blogId: string; files: Array<{ base64: string; name: string }>; }>(event);
if (!files || !files.length) return [];
const urls: string[] = [];
const imagekit = new ImageKit({
// 对应关系见截图
publicKey: imageKitPublickey,
privateKey: imageKitPrivatekey,
urlEndpoint: imageKitUrlEndpoint,
});
for await (const file of files) {
const res = await imagekit.upload({
file: file.base64,
fileName: file.name,
folder: `supabases-blogs/${blogId}`, // 要上传到的目录(相对地址)
});
urls.push(res.url);
}
return urls;
});
拆解就是:
1)通过new ImageKit
创建上传实例对象
2)通过imagekit.upload
方法上传文件(多文件需要循环操作,注意方法是异步的)
3)拿到res.url即可
加餐,免费云服务器的使用
大名鼎鼎的老牌推荐:
两者都支持github一键登录,使用方式不做过多介绍了,你只需要一个域名即可,将域名绑定到服务上即可访问(默认提供的域名国内无法访问)
我自己搭建的博客就是通过vercel和imagekit进行管理的
还有一大亮点就是vercel
免费提供了数据库的使用,非常方便,点击storage
,选择postgrel
即可创建
关于使用方式,直接推荐两篇文章,自行阅读即可:
加餐,免费数据库的使用
主角亮相,一大优点就是配置简单,空间足够,且不需要安装客户端,直接网页操作即可:
这个具体用法直接看文档即可,写的非常详细
我自己搭建的博客数据库就是通过supabase
进行管理的
看个截图,体验一下吧:
感谢阅读,如果文章对您有些许帮助,还麻烦帮忙点个赞,谢谢~😜😜