UploadThing：简化文件上传和管理的利器UploadThing 是一个用于构建文件上传功能的平台，旨在简化文件上

UploadThing 是一个用于构建文件上传功能的平台，旨在简化文件上传和管理、提供灵活的文件管理，并确保安全性和可控性。下面我们将通过具体案例来了解 UploadThing 的基础知识和使用方法。

UploadThing 的主要特点

简化文件上传和管理：UploadThing 提供了一个易于使用的 API 和组件，帮助开发者快速集成文件上传功能到应用中，无论是 React、Solid 还是其他框架。
灵活的文件管理：支持自定义文件类型、大小限制和上传逻辑，适应不同应用场景的需求。
安全性和可控性：UploadThing 允许开发者在自己的服务器上托管上传端点，确保对文件上传的完全控制权和安全性。

使用 UploadThing 在 Next.js 中实现图片上传

以下是一个使用 UploadThing 在 Next.js 应用中实现图片上传功能的简单示例：

步骤 1：安装 UploadThing

首先，安装 UploadThing 的 React 库：

bash
npm install @uploadthing/react @uploadthing/core

步骤 2：配置 UploadThing

在 app/api/uploadthing/core.ts 文件中定义一个文件路由器：

typescript
import { f } from '@uploadthing/core';

const fileRouter = {
  imageUploader: f({
    image: { maxFileSize: '4MB' },
  })
    .middleware(async ({ req }) => {
      // 这里添加验证逻辑，例如检查用户身份
      const user = await auth(req);
      if (!user) throw new UploadThingError('Unauthorized');
      return { userId: user.id };
    })
    .onUploadComplete(async ({ metadata, file }) => {
      // 处理上传完成后的逻辑，例如保存文件元数据
      console.log('File uploaded:', file);
    }),
};

export default fileRouter;

步骤 3：生成 UploadThing 组件

使用 generateUploadButton 函数创建一个类型安全的上传按钮：

typescript
import { generateUploadButton } from '@uploadthing/react';
import type { FileRouter } from './core';

export const UploadButton = generateUploadButton();

步骤 4：在前端使用 UploadThing 组件

在 Next.js 页面中使用 UploadThing 的上传按钮：

jsx
import { UploadButton } from '@/lib/uploadthing';

const ImageUploader = () => {
  return (
    <UploadButton
      onUploadComplete={(response) => console.log('Upload complete:', response)}
      onUploadError={(error) => console.error('Upload error:', error)}
    />
  );
};

export default ImageUploader;

示例用例

自定义文件类型：
- 使用 UploadThing 的配置选项，限制上传文件类型为特定的格式，如 .jpg 或 .png。
- 示例代码：
```
typescript
imageUploader: f({
  image: { allowedFileTypes: ['image/jpeg', 'image/png'] },
}),
```
文件大小限制：
- 设置最大文件大小限制，防止过大文件的上传。
- 示例代码：
```
typescript
imageUploader: f({
  image: { maxFileSize: '10MB' },
}),
```

安全验证：

在中间件中添加安全验证逻辑，例如检查用户身份或权限。
示例代码：

typescript
.middleware(async ({ req }) => {
  const user = await auth(req);
  if (!user) throw new UploadThingError('Unauthorized');
  return { userId: user.id };
}),

通过这个例子，你可以看到 UploadThing 如何帮助你简化 Next.js 应用的图片上传功能，并确保对文件上传的安全控制。

UploadThing 的高级特性

支持多种文件类型：UploadThing 支持上传多种文件类型，如图片、视频、文档等。
自定义上传端点：允许开发者在自己的服务器上托管上传端点，确保对文件上传的完全控制权和安全性。
实时进度反馈：提供实时的上传进度反馈，提高用户体验。

UploadThing 在不同场景中的应用

图片分享平台：UploadThing 适合用于构建图片分享平台，提供安全可靠的图片上传功能。
文档管理系统：可以用于构建文档管理系统，支持上传和管理各种类型的文档。
视频分享应用：UploadThing 也可以用于构建视频分享应用，支持上传和管理视频文件。