作为全栈的前端开发，存储你一定不陌生，而且大概率是需要用到的元素，本文将直接了当的让你免费使用20G的存储，而且还支持api调用来实现文件的上传和下载功能。 这个工具叫做
免费版支持的功能
哎吆，永久免费计划哦，宝子们有福了，哈哈~
👉🏽包含，包括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进行管理的
看个截图，体验一下吧：
感谢阅读，如果文章对您有些许帮助，还麻烦帮忙点个赞，谢谢~😜😜