菲鸽 带你走进 laf OSS (上)

菲鸽 带你走进 laf OSS (上)

大家好,我是 菲鸽 ,今天我带给大家关于 laf OSS------ 存储(Bucket) 的创建和使用。

本文分为以下几部分:

  • 存储(Bucket) 简介
  • 存储(Bucket) 创建
  • 存储(Bucket) 资源上传
  • 存储(Bucket) 资源访问
  • 云函数 中上传文件
  • 实战 云函数 上传

存储(Bucket) 简介

laf 云存储是兼容 S3 API 的对象存储服务,支持多种存储桶权限,包括私有读(private)公共读(readonly)公有读写(readwrite) ,支持通过 HTTP/HTTPS 访问,支持自定义文件元数据,支持文件上传、下载、删除、获取文件列表等操作。

存储(Bucket) 创建

新建一个 存储(Bucket),如下图,需要填写 名称 和 选择 权限,权限有 私有(private)公共读(readonly)公共读写(readwrite) 3种。

  • readwrite 公有读写权限,无需凭证即可对存储桶中的文件进行读写操作。
  • readonly 公有读权限,无需凭证即可对存储桶中的文件进行读操作,但是需要凭证才能对存储桶中的文件进行写操作。
  • private 私有读写权限,需要使用凭证才能对存储桶中的文件进行读写操作。

laf 在新建的时候已经把您的应用的名称 appid 写进去了,如下图:

创建好后,可以看到所有的 存储(Bucket) 列表,显示了 名称权限 ,如下图左侧部分:

laf 会为每个应用自动创建一个名为 {appid}-cloud-bin 的存储桶,用于存储应用的缓存和备份文件,默认该存储桶的权限为 private,建议不要修改该存储桶的权限。(如下图第一个存储桶)

私有(private)公共读写(readwrite) 不能开启 网站托管 ,点击 开启会出现 如下图提示:

注意 公共读写(readwrite) 也不能开启 网站托管

只有 公共读(readonly) 可以开启 网站托管 ,点击 开启会出现 如下图提示:

开启成功后,会显示所有的已经上传的资源,如下图。并且可以取消托管,见下图右上角。

存储(Bucket) 资源上传

点击 上传 即可打开 上传弹窗,支持 选择文件上传拖拽文件上传,并且都支持 文件夹上传的方式 !

使用 文件夹上传 的方式有一个问题,就是 laf 不会帮你新建同名的文件夹并放进去,但是内部的更深层的文件夹会帮你建好,如下图 绿色箭头的2个文件夹 都是在一个父文件夹里面拖进来的,父文件夹不见了,子文件夹还在。

总体体验还是不错的,要是父文件夹也帮我们建了会更好~

存储(Bucket) 资源访问

如下图,点击下面的 眼睛 👁 会自动打开一个 新的tab 显示里面的内容,点击下面 链接 🔗 会帮你复制好 资源地址

复制得到的链接如 https://oss.laf.run/ukw0y1-cloud-bin/pretty-girl.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=ukw0y1%2F20240309%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240309T090027Z&X-Amz-Expires=900&X-Amz-Signature=b538f7f2b03bbdc60b76221ba1b7623f795f4b6b90b34fae47018f93631ac244&X-Amz-SignedHeaders=host访问会有惊喜哦^_^)。

云函数 中上传文件

在云函数中操作云存储,需要提前创建一个 存储桶(Bucket),以下示例使用 data 存储桶演示上传文件操作,请提前创建该存储桶。

1)上传文件

ts 复制代码
import cloud from '@lafjs/cloud'

export default async function (ctx: FunctionContext) {
  // 获取存储桶
  const bucket = cloud.storage.bucket('data')

  // 写文件
  const content = 'hello, laf'
  await bucket.writeFile('laf.html', content)
}

2)指定文件类型(MIME)

在上面的示例中,文件类型默认为 application/octet-stream,如果需要指定文件类型,可以在 writeFile 方法中传入 options.ContentType 参数:

diff 复制代码
import cloud from '@lafjs/cloud'

export default async function (ctx: FunctionContext) {
  // 获取存储桶
  const bucket = cloud.storage.bucket('data')

  // 写文件并指定文件类型为 text/html
  const content = 'hello, laf'
-  await bucket.writeFile('laf.html', content)
+  await bucket.writeFile('index.html', content, {
+    ContentType: 'text/html'
+  })
}

3) 上传文件流

ts 复制代码
import cloud from '@lafjs/cloud'
import { createReadStream } from 'node:fs'

export default async function (ctx: FunctionContext) {

  // 获取存储桶
  const bucket = cloud.storage.bucket('data')

  // 读文件流
  const stream = createReadStream('./package.json')

  // 写文件
  await bucket.writeFile('laf.json', stream, {
    ContentType: 'application/json'
  })
}

4) 上传文件 Buffer

ts 复制代码
import cloud from '@lafjs/cloud'
import { readFile } from 'node:fs/promises'

export default async function (ctx: FunctionContext) {

  // 获取存储桶
  const bucket = cloud.storage.bucket('data')

  // 读文件 Buffer
  const buffer = await readFile('./package.json')

  // 写文件
  await bucket.writeFile('laf.json', buffer, {
    ContentType: 'application/json'
  })
}
相关推荐
艾小逗18 分钟前
uniapp快速入门教程,内容来源于官方文档,仅仅记录快速入门需要了解到的知识点
小程序·uni-app·app·es6
鸭子嘎鹅子呱15 小时前
uniapp使用高德地图设置marker标记点,后续根据接口数据改变某个marker标记点,动态更新
uni-app·map·高德地图
计算机源码社19 小时前
分享一个基于微信小程序的居家养老服务小程序 养老服务预约安卓app uniapp(源码、调试、LW、开题、PPT)
android·微信小程序·uni-app·毕业设计项目·毕业设计源码·计算机课程设计·计算机毕业设计开题
Angus-zoe1 天前
uniapp+vue+微信小程序实现侧边导航
vue.js·微信小程序·uni-app
Pluto & Ethereal1 天前
uni-app尺寸单位、flex布局于背景图片
uni-app
天空下sky1 天前
uniapp+若依 开发租房小程序源码分享
uni-app
帅过二硕ฅ1 天前
uniapp点击跳转到对应位置
前端·javascript·uni-app
佩淇呢1 天前
uniapp vue3 梯形选项卡组件
前端·vue.js·uni-app
[廾匸]2 天前
uni-app获取设备唯一值、静态IP以及公网IP的方法
uni-app·ip·imei·唯一值
luckycoke2 天前
小程序的右侧抽屉开关动画手写效果
前端·javascript·微信小程序·uni-app