0.0.12 • Published 8 days ago
jz-image-manager v0.0.12
九正相册组件
包含单图组件AlbumSingleInput和多图组件AlbumSrcMulInput
属性描述
图像选择器
依赖
"@ant-design/icons": "^5.3.6",
"ahooks": "^3.7.2",
"antd": "^4.23.4",
"antd-img-crop": "^4.1.0",
"jz-image-manager": "^0.0.5",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-flexbox-grid": "^2.1.2"特性
- 支持指定数量的图像选择(max > 1)
- 多图可拖动更换顺序
- 单图支持裁剪上传 (crop = w/h, 如 1.25)
- 传入指定service调用即可使用
参数
| 参数 | 类型 | 说明 |
|---|---|---|
| initList | Array | 初始值 |
| max | number | 图像数量 default:5 |
| uploadData | {} | 上传图像扩展 post 数据 |
| crop | number | 单图上传的裁剪比例 |
| onChange | onChange?: (items: Array) => void | 上传图像扩展 post 数据 |
| service | Object | service对象，里面包含接口调用的方法函数，详细见service对象详情 |
| action | string | 上传图片的路径 |
| nums | number | 作为参数传给服务端控制每一页显示的图片数 |
| token | string | 上传图片的时候的token，可选 |
| maxFileSize | number | 上传图片大小限制（单位kb） |
| accept | string | 接收图片格式类型，多种格式逗号分隔 |
example
const initParams = {
token:
"eyJiIjoiODg4IiwiZWlkIjoiMSIsImVzIjoiMTQ4ODciLCJ1IjoiODc4IiwidyI6NzMsInQiOjE3MTA0OTA4NTQsImUiOjcyMDB9.67d0e1689b556d77eabcb5ea293eca1f",
action: "http://wxapi.market.jz.cn/module/album/upload",
max: 9,
corp: 1/1 ,
value: [
"https://dss2.bdstatic.com/5bVYsj_p_tVS5dKfpU_Y_D3/res/r/image/2021-3-4/hao123%20logo.png",
],
onChange: (pic: string) => {
console.log("onChange", pic)
},
maxFileSize: 3 * 1024,
accept: ".jpg",
}
<AlbumSingleInput
service={service}
crop={initParams.corp}
token={initParams.token}
action={initParams.action}
maxFileSize={initParams.maxFileSize}
accept={initParams.accept}
onChange={initParams.onChange}
/>
<AlbumSrcMulInput
service={service}
crop={initParams.corp}
token={initParams.token}
action={initParams.action}
maxFileSize={initParams.maxFileSize}
accept={initParams.accept}
onChange={initParams.onChange}
/>