console.log(files.length)}
onUploadProgress={(file) => console.log(file.progress)}
onUploadSuccess={(file, result) => console.log(file.file.name, result.url)}
onUploadError={(file, error) => toast.error(`${file.file.name}: ${error.message}`)}
onUploadComplete={(files) => console.log(files)}
/>
```
组合式 UI：
```tsx
选择图片
{({ isDragOver, isUploading }) =>
isUploading ? "上传中..." : isDragOver ? "松开上传" : "拖拽文件到这里"
}
```
只复用逻辑：
```tsx
const { files, upload, isUploading, removeFile, clearFiles, getRootProps, getInputProps } =
useUpload({
multiple: true,
onUploadComplete: (items) => console.log(items),
});
return (
{files.map((file) => (
))}
);
```
### 上传服务
位置：
- `packages/@buildingai/web/services/src/shared/upload.ts`
- `packages/@buildingai/web/services/src/shared/upload-oss.ts`
导入：
```ts
import {
invalidateStorageConfigCache,
uploadFile,
uploadFileAuto,
uploadFiles,
uploadFilesAuto,
uploadInitFile,
} from "@buildingai/services/shared";
```
选择规则：
| 函数 | 场景 |
| ------------------------------ | -------------------------------------------- |
| `uploadFileAuto` | 业务单文件上传，自动判断本地或 OSS，优先使用 |
| `uploadFilesAuto` | 业务多文件上传，自动判断本地或 OSS，优先使用 |
| `uploadFile` | 强制走后端本地上传接口 |
| `uploadFiles` | 强制走后端本地多文件上传接口 |
| `uploadInitFile` | 系统初始化阶段，无登录态上传 |
| `invalidateStorageConfigCache` | 修改存储配置后清空前端缓存 |
```ts
const result = await uploadFileAuto(
file,
{ description: "头像" },
{
onUploadProgress: (event) => {
const percent = event.total ? Math.round((event.loaded / event.total) * 100) : 0;
setProgress(percent);
},
},
);
```
注意：
- 页面层一般不直接调用上传服务，优先用 `ImageUpload`、`Upload`、`useUploadFile`。
- 如果后台切换了存储类型，需要调用 `invalidateStorageConfigCache()`，否则前端可能继续使用旧的 active
storage 配置。
## 列表与滚动
### InfiniteScroll
向下加载更多，适合卡片列表、表格外层列表。
```tsx
import { InfiniteScroll } from "@buildingai/ui/components/infinite-scroll";
fetchNextPage()}
>
{items.map((item) => (