`菲鸽` 带你走进 `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）上传文件

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 参数：

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) 上传文件流

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

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'
  })
}

实战 `云函数` 上传

编写代码如下，里面的 bucketName 怎么来的呢，请看下图，去掉前缀剩下的就是，比如下面第二个为 site。

import cloud from "@lafjs/cloud"
import { readFile } from 'fs/promises'

const bucketName = 'site'
export default async function (ctx: FunctionContext) {
  const file = ctx.files[0]
  const data = await readFile(file.path)

  const bucket = cloud.storage.bucket(bucketName)
  await bucket.writeFile(file.filename, data, {
    ContentType: file.mimetype
  })

  const url = bucket.externalUrl(file.filename)
  return url
}

编写好后，右侧 运行 区域选择 post 请求，点击 body，选择 form-data，然后里面选择的参数key 选择 file，右侧点击可以上传文件，如下图我上传了我的微信头像 wx-avatar.jpg，最后点击 运行 即可。

运行结果会返回一个 url (主要看代码部分怎么写的，可以返回更多的信息，比如包裹一层等），url 为： https://oss.laf.run/ukw0y1-site/e03bf05c-d4da-4d32-beb5-cf13d33a27a8.jpg。

进入 存储 菜单，可以看到刚刚上传的资源就在那，如下图：

学废了吗？

如果本文对您有帮助，请点一个免费的 赞👍🏻，Thanks♪(･ω･)ﾉ

番外篇 - 私有存储桶的资源

1）在 私有存储桶 里面上传的文件，只有 15分钟的有效期，链接如 https://oss.laf.run/ukw0y1-unibest-course/a55ef5f4-4237-4714-b847-776cf77ff2e6.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=ukw0y1%2F20240309%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240309T104239Z&X-Amz-Expires=900&X-Amz-Signature=032dd40f509ce9e043d4fc9b650611eb02a7719ad9d123e18c7d890b52e865f8&X-Amz-SignedHeaders=host 这个样子。

15分钟的有效期 如下图所示：

2）代码上传 私有存储桶 返回的链接，直接访问会提示 AccessDenied

上面得到的 https://oss.laf.run/ukw0y1-unibest-course/da230d24-6ff2-4d63-a46b-9c9b9f29ed39.jpg 直接访问会 AccessDenied，如下

全文完~

如果本文对您有帮助，请点一个免费的 赞👍🏻，Thanks♪(･ω･)ﾉ

菲鸽 带你走进 laf OSS

菲鸽 带你走进 laf OSS

存储（Bucket) 简介

存储（Bucket) 创建

存储（Bucket) 资源上传

存储（Bucket) 资源访问

在 云函数 中上传文件