RedwoodJS 文件上传功能实现指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00275/article/details/148375167

RedwoodJS 文件上传功能实现指南

redwood The App Framework for Startups 项目地址: https://gitcode.com/gh_mirrors/re/redwood

前言

在现代Web开发中，文件上传是一个常见需求。RedwoodJS作为一个全栈框架，采用无服务器(Serverless)架构，这为文件上传带来了独特的挑战和解决方案。本文将详细介绍如何在RedwoodJS应用中实现文件上传功能。

为什么选择第三方服务

在传统服务器架构中，文件通常直接上传到服务器本地存储。但在无服务器环境中，我们需要考虑：

无持久化存储：Serverless函数是临时的
扩展性问题：直接处理大文件上传会影响性能
CDN分发：需要高效的内容分发机制

因此，使用专业的文件存储和分发服务是更优选择。本文将使用Filestack作为示例服务。

准备工作

1. 注册Filestack账号

Filestack提供免费套餐，包含：

每月100次上传
1000次文件转换
1GB带宽
0.5GB存储空间

注册后获取API密钥，我们将用它来集成服务。

2. 创建RedwoodJS应用

yarn create redwood-app uploader
cd uploader

3. 配置环境变量

在项目根目录的.env文件中添加：

REDWOOD_ENV_FILESTACK_API_KEY=你的API密钥

注意使用REDWOOD_ENV_前缀，确保Vite能正确处理这些变量。

数据库设计

我们将创建一个简单的图片管理系统(DAM)。首先定义数据模型：

model Image {
  id    Int    @id @default(autoincrement())
  title String
  url   String
}

执行迁移命令创建数据库表：

yarn rw prisma migrate dev

前端实现

1. 安装Filestack React组件

yarn workspace web add filestack-react

2. 创建上传表单

在ImageForm组件中集成Filestack的上传组件：

import { PickerInline } from 'filestack-react'
import { useState } from 'react'

const ImageForm = (props) => {
  const [url, setUrl] = useState(props?.image?.url)

  const onFileUpload = (response) => {
    setUrl(response.filesUploaded[0].url)
  }

  return (
    <PickerInline
      apikey={process.env.REDWOOD_ENV_FILESTACK_API_KEY}
      onSuccess={onFileUpload}
    />
  )
}

3. 优化用户体验

添加已上传图片预览和替换功能：

<PickerInline
  apikey={process.env.REDWOOD_ENV_FILESTACK_API_KEY}
  onSuccess={onFileUpload}
>
  <div style={{ display: url ? 'none' : 'block', height: '500px' }}></div>
</PickerInline>

{url && (
  <div>
    <img src={url} style={{ display: 'block', margin: '2rem 0' }} />
    <button onClick={() => setUrl(null)}>
      替换图片
    </button>
  </div>
)}

图片优化处理

Filestack支持实时图片转换，可以显著减少带宽消耗。例如，将大图转换为缩略图：

const thumbnail = (url) => {
  const parts = url.split('/')
  parts.splice(3, 0, 'resize=width:100')
  return parts.join('/')
}

// 使用方式
<img src={thumbnail(image.url)} style={{ maxWidth: '50px' }} />

这种转换可以将157kB的原图压缩到仅6.5kB，极大提升页面加载速度。

后端实现

1. 安装Filestack Node.js SDK

yarn workspace api add filestack-js

2. 配置安全密钥

在.env中添加Filestack安全密钥：

REDWOOD_ENV_FILESTACK_SECRET=你的安全密钥

3. 实现删除功能

在服务端实现图片删除逻辑，同时清理Filestack上的文件：

import * as Filestack from 'filestack-js'

export const deleteImage = async ({ id }) => {
  const client = Filestack.init(process.env.REDWOOD_ENV_FILESTACK_API_KEY)
  
  const image = await db.image.findUnique({ where: { id } })
  const handle = image.url.split('/').pop()

  const security = Filestack.getSecurity(
    {
      expiry: new Date().getTime() + 5 * 60 * 1000,
      handle,
      call: ['remove'],
    },
    process.env.REDWOOD_ENV_FILESTACK_SECRET
  )

  await client.remove(handle, security)
  return db.image.delete({ where: { id } })
}