cunkebao_v3/nkebao/src/components/Upload/README.md

Upload 上传组件

基于 antd-mobile 的 ImageUploader 组件封装的上传组件，支持图片上传、预览、删除等功能。

功能特性

• ✅ 支持单张/多张图片上传
• ✅ 文件类型和大小验证
• ✅ 上传进度显示
• ✅ 图片预览功能
• ✅ 删除确认
• ✅ 数量限制
• ✅ 编辑和新增状态支持
• ✅ 响应式设计

使用方法

基础用法

import React, { useState } from "react";
import UploadComponent from "@/components/Upload";

const MyComponent = () => {
  const [images, setImages] = useState<string[]>([]);

  return (
    <UploadComponent
      value={images}
      onChange={setImages}
      count={5}
      accept="image/*"
    />
  );
};

编辑模式

const EditComponent = () => {
  const [images, setImages] = useState<string[]>([
    "https://example.com/image1.jpg",
    "https://example.com/image2.jpg",
  ]);

  return (
    <UploadComponent
      value={images}
      onChange={setImages}
      count={9}
      disabled={false}
    />
  );
};

禁用状态

<UploadComponent value={images} onChange={setImages} disabled={true} />

API

Props

参数	说明	类型	默认值
value	图片URL数组	string[]	[]
onChange	图片变化回调	(urls: string[]) => void	-
count	最大上传数量	number	9
accept	接受的文件类型	string	"image/*"
disabled	是否禁用	boolean	false
className	自定义类名	string	-

事件

事件名	说明	回调参数
onChange	图片列表变化时触发	(urls: string[]) => void

注意事项

1. 文件大小限制: 默认限制为 5MB
2. 文件类型: 默认只接受图片文件
3. 上传接口: 使用 /v1/attachment/upload 接口
4. 认证: 自动携带 token 进行认证
5. 预览: 点击图片可预览
6. 删除: 删除图片会有确认提示

样式定制

组件支持通过 CSS 模块进行样式定制：

.uploadContainer {
  // 自定义样式
  :global {
    .adm-image-uploader {
      // 覆盖 antd-mobile 默认样式
    }
  }
}

错误处理

• 文件类型不匹配时会显示错误提示
• 文件大小超限时会显示错误提示
• 上传失败时会显示错误提示
• 网络错误时会显示错误提示