Nuxt 檔案儲存

輕鬆將檔案儲存在您的 Nuxt 應用程式中的解決方案。能夠從前端上傳檔案，並從後端接收這些檔案，然後將它們儲存在您的專案中。

功能

📁 從檔案輸入取得檔案並使其準備好傳送到後端
⚗️ 在後端序列化檔案，以便能夠適當地使用它們
🖴 使用 Nitro 引擎將檔案儲存在 Nuxt 後端的指定位置

快速設定

將 nuxt-file-storage 依賴項新增至您的專案

# Using pnpm
pnpm add -D nuxt-file-storage

# Using yarn
yarn add --dev nuxt-file-storage

# Using npm
npm install --save-dev nuxt-file-storage

將 nuxt-file-storage 新增至 nuxt.config.ts 的 modules 區段

export default defineNuxtConfig({
    modules: ['nuxt-file-storage'],
})

就這樣！您現在可以在您的 Nuxt 應用程式中使用 Nuxt Storage 了 ✨

設定

您目前可以設定 nuxt-file-storage 模組的單一設定。這是設定介面

export default defineNuxtConfig({
    modules: ['nuxt-file-storage'],
    fileStorage: {
        // enter the absolute path to the location of your storage
        mount: '/home/$USR/development/nuxt-file-storage/server/files',

        // {OR} use environment variables (recommended)
        mount: process.env.mount
        // you need to set the mount in your .env file at the root of your project
    },
})

用法

在前端處理檔案

您可以使用 Nuxt Storage 從 <input> 標籤取得檔案

<template>
    <input type="file" @input="handleFileInput" />
</template>

<script setup>
    // handleFileInput can handle multiple files
    // clearOldFiles: true by default, each time the user adds files the `files` ref will be cleared
    const { handleFileInput, files } = useFileStorage({ clearOldFiles: false })
</script>

files 會傳回一個包含檔案的 ref 物件

handleFileInput 會傳回一個 promise，以防您需要檢查檔案輸入是否已完成

以下是如何使用檔案將它們傳送到後端的範例

<template>
    <input type="file" @input="handleFileInput" />
    <button @click="submit">submit</button>
</template>

<script setup>
const { handleFileInput, files } = useFileStorage()

const submit = async () => {
    const response = await $fetch('/api/files', {
        method: 'POST',
        body: {
            files: files.value
        }
    })
}
</script>

處理多個檔案輸入欄位

您必須為每個輸入欄位建立 useFileStorage 的新執行個體

<template>
    <input type="file" @input="handleFileInput" multiple />   ← | 1 |
    <input type="file" @input="profileInputHandler" />                 ← | 2 |
</template>

<script setup>
    const { handleFileInput, files } = useFileStorage()       ← | 1 |

    const {
        handleFileInput: profileInputHandler,
        files: profileImage
    } = useFileStorage()                                               ← | 2 |
</script>

透過呼叫新的 useFileStorage 執行個體，您可以將輸入之間的內部邏輯分開

在後端處理檔案

使用 Nitro Server Engine，我們將建立一個 API 路由，該路由接收檔案並將它們儲存在 userFiles 資料夾中

export default defineEventHandler(async (event) => {
    const { files } = await readBody<{ files: File[] }>(event)

    for ( const file of files ) {
        await storeFileLocally(
            file,         // the file object
            8,            // you can add a name for the file or length of Unique ID that will be automatically generated!
            '/userFiles'  // the folder the file will be stored in
        )

        // {OR}

        // Parses a data URL and returns an object with the binary data and the file extension.
        const { binaryString, ext } = parseDataUrl(file.content)
    }

    return 'success!'
})

interface File {
    name: string
    content: string
}

就這樣！現在您可以從使用者將任何檔案儲存在您的 Nuxt 專案中了 ✨

貢獻

遇到問題了嗎？開啟一個新議題。如果它符合專案的範圍，我會盡力包含所有要求的功能。

想要新增一些功能嗎？歡迎提交 PR！

複製此儲存庫
安裝相依性
準備專案
執行開發伺服器

git clone https://github.com/NyllRE/nuxt-file-storage && cd nuxt-file-storage
npm i
npm run dev:prepare
npm run dev