FileUploader 文件上传组件使用说明

概述

FileUploader 是通用文件上传组件，封装了「选择文件 → 携带 token 上传 → 进度回调 → 结果回调」的完整流程。

• 位置：src/common/components/file/FileUploader.tsx
• 技术栈：React（客户端组件）+ axios + react-hot-toast + next-intl

快速开始

import FileUploader from "@/common/components/file/FileUploader";
import {UPLOAD_URL} from "@/common/lib/Env";

<FileUploader
    url={UPLOAD_URL}
    uploadCallback={(url, fileName) => console.log(url, fileName)}
    uploadIcon={<button>上传</button>}
    id="my-uploader"
/>

环境变量

上传地址由环境变量 NEXT_PUBLIC_UPLOAD_URL 配置，代码通过 Env.ts 统一读取。

环境	配置值
development	http://localhost:8888/upload.json
production	https://api.sparrowzoo.com/upload.json

前缀 NEXT_PUBLIC_ 必须保留，Next.js 只会把带该前缀的变量内联到客户端。

Props

Prop	类型	必填	默认值	说明
url	string	是	-	上传接口地址
uploadCallback	(url, fileName) => void	是	-	成功回调
uploadIcon	ReactNode	是	-	触发上传的图标
id	string	是	-	input 唯一 id
pathType	string	否	"im"	上传路径类型

上传流程

1. 点击 uploadIcon 触发文件选择
2. 校验文件（空则提示「请选择文件」）
3. 组装 FormData（file + pathType）
4. 从 CrosStorage 获取 token
5. axios POST 上传，实时上报进度
6. 判断 result.code（非 "0" 则提示错误）
7. 成功则回调 uploadCallback
8. 复位 uploading 与 progress

返回结构 Result

interface Result {
    code: string;      // "0" 表示成功
    message?: string;  // 失败提示
    data: any;         // 文件地址等业务数据
}

国际化

Key	中文	英文
select-file	请选择文件	Please select a file
upload-success	上传成功	Upload successful
upload-failed	上传失败: {message}	Upload failed: {message}