cloudflare+hono使用worker实现api接口和r2文件存储和下载

大家好,我的开源项目PakePlus可以将网页/Vue/React项目打包为桌面/手机应用并且小于5M只需几分钟,官网地址:pakeplus.com

步骤也很简单,就是使用命令创建一个hono创建一个基础框架,然后绑定r2对象存储,然后写上传和下载的接口,然后测试发布即可。

使用命令:

bash 复制代码
pnpm create cloudflare@latest upload-r2

然后创建后打开,绑定r2:

bucket_name 这里添加你的存储桶名称即可,没有的话,在后台页面创建一个存储桶或者使用命令行创建一个。

然后运行命令:

bash 复制代码
wrangler deploy --minify

这个主要是将绑定的存储桶R2可以在代码中使用不提示报错。

然后在index.ts中写上传逻辑:

javascript 复制代码
app.post('/upload', async (c) => {
    const form = await c.req.parseBody()
    const file = form['file'] as File
    if (!file || !file.name) {
        return c.json({ error: 'No file uploaded' }, 400)
    }
    const buffer = await file.arrayBuffer()
    const object = await c.env.R2.put(file.name, buffer)
    return c.json({ object })
})

这个代码主要就是拿到post请求中的file文件,然后使用R2存储到桶里面,写完之后会返回存储后的结果,可以本地运行测试,本地启动服务后,使用postman或者apifox都可以测试:

说明没有问题,这里可以上传任意类型的文件,访问的时候也可以访问任意类型。为什么不用Express框架?因为Express框架和cf不是很兼容,在访问视频文件或者大文件的时候,和cf不兼容,访问不到。所以强烈推荐Hono这个框架,而且Hono用起来和Express差不多,甚至更方便。

然后开始写访问文件逻辑和下载逻辑:

javascript 复制代码
app.get('/download/:key', async (c) => {
    const key = c.req.param('key')
    const object = await c.env.R2.get(key)
    if (!object) {
        return c.json({ error: 'File not found' }, 404)
    }
    return c.body(object.body)
})

这里主要就是发送get请求访问上传的文件,在apifox中访问刚才上传的文件:完美访问

还可以查询桶里面有哪些文件:

javascript 复制代码
app.get('/files', async (c) => {
    const objects = await c.env.R2.list()
    return c.json({ files: objects.objects.map((object) => object.key) })
})

就会返回文件列表:

相关推荐
梦曦i7 分钟前
0.8.2 新增 backFallback 配置,无 tabbar 页返回无忧
前端·uni-app x
Amos_Web11 分钟前
Rspack 源码解析(三十四):rspack_hook 与宏系统如何用过程宏生成异步 Hook 与插件
前端
恋猫de小郭15 分钟前
感人,Flutter 居然有了一个超实用提案,期待落地
android·前端·flutter
wordbaby20 分钟前
为什么 Apifox 能调通,浏览器却报跨域?一次“CORS Error + 403”联调排坑实录
前端
2603_9658966227 分钟前
JavaScript 原型与原型链
开发语言·前端·javascript
Amos_Web27 分钟前
通过 Rspack 源码学 Rust(四):用 `Option<T>` 表达“查询可能没有结果”
前端
朋友圈自动点赞工具33 分钟前
Ruby方法查找:对象不存方法
开发语言·前端·ruby·科技资讯
晓得迷路了37 分钟前
栗子前端技术周刊第 152 期 - Rspack 2.3、TypeScript 7.1 Beta、Bun 1.4.4...
前端·javascript·css
普通人61 小时前
CSS-box-sizing-使用指南
开发语言·前端·css·1024程序员节
风骏时光牛马1 小时前
AI开源工具一站式尝鲜体验
前端