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 服务器引擎，我们将创建一个 API 路由，该路由接收文件并将它们存储在 userFiles 文件夹中

import { ServerFile } from "nuxt-file-storage";

export default defineEventHandler(async (event) => {
    const { files } = await readBody<{ files: ServerFile[] }>(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)
    }

    // Deleting Files
    await deleteFile('requiredFile.txt', '/userFiles')

    // Get file path
    await getFileLocally('requiredFile.txt', '/userFiles')
    // returns: {AbsolutePath}/userFiles/requiredFile.txt

    // Get all files in a folder
    await getFilesLocally('/userFiles')
})

就是这样！现在你可以从用户处在你的 Nuxt 项目中存储任何文件了 ✨

贡献

遇到问题？打开一个新 issue。如果它符合项目的范围，我将尽力包含所有请求的功能。

想要添加一些功能？欢迎提交 PR！

克隆此仓库
安装依赖
准备项目
运行开发服务器

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