UploadImage 图片上传

    支持多张图片上传的组件。

    安装

    npm
    yarn
    pnpm
    bun
    deno
    npx shadcn@latest add https://codebase.anyask.dev/r/upload-image.json

    基础用法

    import { UploadImage } from '@/components/UploadImage';

function Demo() {
  const [value, setValue] = useState([]);

  return (
    <UploadImage
      value={value}
      onChange={setValue}
    />
  );
}

    限制上传数量和大小

    function Demo() {
  const [value, setValue] = useState([]);

  return (
    <UploadImage
      value={value}
      onChange={setValue}
      maxCount={5}
      fileSize={10}
    />
  );
}

    上传中回调

    function Demo() {
  const [value, setValue] = useState([]);
  const [uploading, setUploading] = useState(false);

  return (
    <UploadImage
      value={value}
      onChange={setValue}
      onUploading={setUploading}
    />
  );
}

    API

    UploadImageProps

    属性说明类型默认值
    value图片列表Array<{ fileHash: string; fileName: string }>-
    onChange变化回调(value: Array<{ fileHash: string; fileName: string }>) => void-
    maxCount图片最大个数number9
    fileSize图片大小限制（单位 M）number5
    onUploading是否上传中的回调(uploading: boolean) => void-

    继承 Ant Design Upload 组件的其他属性（除 value、onChange、accept）。