九正相册组件

包含单图组件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}
/>