## OPImageUploader 图片上传组件

·API

| 参数           | 说明                                        | 类型     | 默认值 |
| -------------- | ------------------------------------------- | -------- | ------ |
| value          | 图片列表                                    | Array    | []     |
| maxCount       | 最大上传数量                                | Number   | 1      |
| deletable      | 是否可删除                                  | Boolean  | false  |
| box            | 上传框大小                                  | Number   | 80     |
| loading        | 上传中状态                                  | Boolean  | false  |
| beforeUpload   | 上传前的回调函数，参数包含 { data, base64 } | Function | -      |
| onBeforeUpload | 上传前的回调函数，参数包含 { data, base64 } | Function | -      |
| onDelete       | 删除图片的回调函数，参数包含 (item, index)  | Function | -      |

```jsx
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { OPImageUploader, OPButton, OPSwitch } from '../src/view';

const DemoImageUploader = () => {
  const [images, setImages] = useState([
    {
      id: 1,
      url: 'https://img.alicdn.com/imgextra/i1/O1CN01Y2SOnw1RCqxJtE5iF_!!6000000002076-2-tps-528-712.png',
    },
    {
      id: 2,
      url: 'https://img.alicdn.com/imgextra/i3/O1CN01ZljOEh1DlI703Puek_!!6000000000256-0-tps-960-1280.jpg',
    },
    {
      id: 3,
      url: 'https://img.alicdn.com/imgextra/i2/O1CN01yeKSst1t4Qv6ED1QB_!!6000000005848-2-tps-520-476.png',
    },
  ]);
  const [loading, setLoading] = useState(false);
  const [deletable, setDeletable] = useState(false);
  const [maxCount, setMaxCount] = useState(1);

  const handleBeforeUpload = (data) => {
    console.log('上传前回调:', data);
    setLoading(true);
    // 模拟上传
    setTimeout(() => {
      setLoading(false);
      setImages([...images, { id: Date.now(), url: data.base64 }]);
    }, 2000);
  };

  const handleDelete = (item, index) => {
    console.log('删除图片:', item, index);
    const newImages = images.filter((_, i) => i !== index);
    setImages(newImages);
  };

  const handleClear = () => {
    setImages([]);
  };

  return (
    <div>
      <h1>基础用法</h1>
      <div style={{ marginBottom: '16px' }}>
        <OPSwitch
          checked={deletable}
          onChange={(checked) => setDeletable(checked)}
        />
        <span style={{ marginLeft: '8px' }}>可删除</span>
      </div>
      <OPImageUploader
        value={images}
        maxCount={maxCount}
        deletable={deletable}
        loading={loading}
        beforeUpload={handleBeforeUpload}
        onDelete={handleDelete}
      />

      <h1>多图上传</h1>
      <div style={{ marginBottom: '16px' }}>
        <OPButton
          size='small'
          onClick={() => setMaxCount(maxCount === 1 ? 5 : 1)}
        >
          切换单图/多图 (当前: {maxCount === 1 ? '单图' : '多图'})
        </OPButton>
        <OPButton size='small' onClick={handleClear}>
          清空
        </OPButton>
      </div>
      <OPImageUploader
        value={images}
        maxCount={maxCount}
        deletable={true}
        loading={loading}
        beforeUpload={handleBeforeUpload}
        onDelete={handleDelete}
      />
    </div>
  );
};

ReactDOM.render(<DemoImageUploader />, mountNode);
```

```css
body {
  overflow: auto;
}
```