UploadThing 项目教程

项目介绍

UploadThing 是一个现代化的文件上传工具，专为现代 Web 开发者设计。它提供了简单易用的 API 和组件，帮助开发者快速实现文件上传功能。UploadThing 支持多种文件类型和上传方式，适用于各种 Web 应用场景。

项目快速启动

安装

首先，你需要在你的项目中安装 UploadThing。你可以使用 npm 或 yarn 进行安装：

npm install uploadthing

或者

yarn add uploadthing

基本使用

以下是一个简单的示例，展示如何在 React 项目中使用 UploadThing 进行文件上传：

import React, { useState } from 'react';
import { UploadThing } from 'uploadthing';

const App = () => {
  const [file, setFile] = useState(null);

  const handleUpload = (file) => {
    setFile(file);
    console.log('File uploaded:', file);
  };

  return (
    <div>
      <h1>UploadThing 示例</h1>
      <UploadThing onUpload={handleUpload} />
      {file && <p>上传的文件: {file.name}</p>}
    </div>
  );
};

export default App;

配置

你可以在 UploadThing 组件中配置上传选项，例如文件类型、最大文件大小等：

<UploadThing
  onUpload={handleUpload}
  accept="image/*"
  maxSize={10 * 1024 * 1024} // 10MB
/>

应用案例和最佳实践

案例1：图片上传

在社交媒体应用中，用户通常需要上传个人头像或发布图片。使用 UploadThing 可以轻松实现这一功能：

<UploadThing
  onUpload={(file) => {
    // 上传成功后，将图片 URL 保存到数据库
    saveImageToDatabase(file.url);
  }}
  accept="image/*"
  maxSize={5 * 1024 * 1024} // 5MB
/>

案例2：文件批量上传

在企业应用中，用户可能需要上传多个文件，例如文档或报告。UploadThing 支持批量上传功能：

<UploadThing
  onUpload={(files) => {
    files.forEach((file) => {
      console.log('Uploaded file:', file);
    });
  }}
  multiple
/>

最佳实践

1. 文件类型验证：在 accept 属性中指定允许的文件类型，避免用户上传不合适的文件。
2. 文件大小限制：使用 maxSize 属性限制文件大小，防止用户上传过大的文件。
3. 错误处理：在 onUpload 回调中处理上传失败的情况，并向用户显示友好的错误信息。

典型生态项目

1. Next.js

UploadThing 与 Next.js 完美集成，可以轻松实现服务器端文件上传和处理。你可以使用 Next.js 的 API 路由来处理上传的文件：

// pages/api/upload.js
import { uploadFile } from 'uploadthing';

export default async function handler(req, res) {
  const file = req.body.file;
  const result = await uploadFile(file);
  res.status(200).json({ success: true, file: result });
}

2. React

UploadThing 提供了 React 组件，可以直接在 React 项目中使用。你可以通过 onUpload 回调处理上传的文件，并更新组件状态。

3. SolidStart

对于使用 SolidStart 的项目，UploadThing 提供了 SSR 支持，可以在服务器端处理文件上传逻辑。

4. Vite

Vite 是一个快速的前端构建工具，UploadThing 可以与 Vite 项目无缝集成，提供高效的文件上传功能。

通过以上模块的介绍，你应该已经对 UploadThing 有了基本的了解，并能够在自己的项目中快速上手使用。