Cloudflare R2 als Object Storage nutzen

Sehen Sie sich den Quellcode hier an.

LaunchFa.st stellt Ihnen die APIs zur Verfügung, um mit Cloudflare R2 zu interagieren, aufgebaut auf Web-Standards.

So richten Sie Cloudflare R2 für die Nutzung mit LaunchFast ein:

Die `<Upload />`-Komponente verwenden

Um Datei-Uploads in Ihrer Anwendung einfach umzusetzen, importieren Sie die Upload-Komponente in Ihrer Anwendung:

---
import Upload from '@/components/Upload.astro'
---

<Upload />

<script lang="ts">
import Upload from '@/components/Upload.svelte'
</script>

<Upload />

'use client'

import Upload from '@/components/Upload'

export default async function () {
  return <Upload />
}

Dateien aus Cloudflare R2 abrufen (`GET`)

Um Dateien aus Cloudflare R2 abzurufen, übergeben Sie den Slug der Datei als file-searchParam an die Route /api/storage wie folgt:

<script>
  const getFile = new URL('/api/storage', window.location.origin)
  getFile.searchParams.set('file', fileURL)

  fetch(getFile.toString())
    .then((res) => res.json())
    .then((res) => {
      const { filePublicURL } = res
      console.log(filePublicURL)
    })
</script>

<script lang="ts">
  import { onMount } from 'svelte'

  const getFile = new URL('/api/storage', window.location.origin)
  getFile.searchParams.set('file', fileURL)

  onMount(() => {
    fetch(getFile.toString())
      .then((res) => res.json())
      .then((res) => {
        const { filePublicURL } = res
        console.log(filePublicURL)
      })
  })
</script>

'use client'

useEffect(() => {
  const getFile = new URL('/api/storage', window.location.origin)
  getFile.searchParams.set('file', fileURL)
  fetch(getFile.toString())
    .then((res) => res.json())
    .then((res) => {
      const { filePublicURL } = res
      console.log(filePublicURL)
    })
}, [])