rc-image-upload

图片上传，截图上传插件，支持点击上传、截图粘贴上传、拖拽上传

在线demo

Usage

1import * as React from 'react';
2import * as ReactDOM from 'react-dom';
3import RcImageUpload from '../src';
4
5/*
6type FileItem = {
7	name: string,
8	url: string,
9}
10// 可配置参数
11type RcImageUploadProps = {
12    id: string;
13    width?: string | number;
14    height?: string | number;
15    pictureWidth?: string | number; // 图片宽高
16    pictureHeight?: string | number;
17    action?: string; // 上传的路径
18    listType?: 'picture-card' | 'picture';
19    multiple?: boolean; // 是否支持多选
20    accept?: string; // 支持类型 默认.png,.jpg,.jpeg
21    maxCount?: number; // 最大上传个数
22    fileList?: FileItem[]; // 上传列表
23    preventPreview?: boolean; // 阻止默认预览
24    onPreview?: (e: FileItem) => void; // 预览事件
25    onUploadChange?: (e: UploadEvent) => void; // 上传事件
26    onAfterUpload?: (e: UploadEvent) => void; // 上传后事件
27    onAfterDelete?: (e: UploadEvent) => void; // 删除后事件
28};*/
29
30const App = () => {
31    const uploadChange = (e: any) => {
32        console.log(e)
33    }
34    const onPreview = (e: FileItem)=> {
35        console.log(e);
36    }
37    return (
38        <RcImageUpload
39                id={`test`} height={600} width={400} pictureHeight={64} pictureWidth={64}
40                fileList={[]}
41                maxCount={4}
42				preventPreview={true}
43                onPreview={onPreview}
44                onUploadChange={uploadChange}
45                onAfterUpload={uploadChange}
46                onAfterDelete={uploadChange}
47            />
48    );
49};
50
51ReactDOM.render(<App/>, document.getElementById('root'));
52