2 lines
2.8 KiB
JavaScript
2 lines
2.8 KiB
JavaScript
import{F as l,r as c,j as e,T as d,S as g,B as m}from"./index-B-sDl1ER.js";import{I as a}from"./index-BZjcF0yn.js";import{C as p}from"./index-CO5DzGxy.js";import"./tslib.es6-BaFViOhq.js";import"./index-D3yl9SWR.js";import"./progress-C__thZ4V.js";const{Title:h,Paragraph:j}=d,C=()=>{const[t]=l.useForm(),[i,o]=c.useState(null),[r,n]=c.useState([]),x=async()=>{try{const s=await t.validateFields();console.log("Form values:",s),console.log("Single image:",i),console.log("Multiple images:",r)}catch(s){console.error("Validation failed:",s)}},u=()=>{t.resetFields(),o(null),n([])};return e.jsxs("div",{children:[e.jsxs(d,{style:{margin:"12px 0 24px 0"},children:[e.jsx(h,{level:2,children:"图片上传组件示例"}),e.jsx(j,{children:"基于 Ant Design Upload 封装的图片上传组件，支持图片剪裁、多张图片上传、尺寸限制、禁用状态等。"})]}),e.jsx(p,{title:"基础用法",style:{marginBottom:24},children:e.jsxs(l,{form:t,layout:"vertical",children:[e.jsx(l.Item,{label:"单张图片上传",name:"avatar",extra:"支持单张图片上传，最大 5MB，尺寸不超过 1920x1080",children:e.jsx(a,{action:"/sys/file/list/upload/image",mode:"single",value:i,onChange:s=>o(s)})}),e.jsx(l.Item,{label:"多张图片上传",name:"gallery",extra:"支持最多 5 张图片上传",children:e.jsx(a,{action:"/sys/file/list/upload/image",mode:"multiple",maxCount:5,value:r,onChange:s=>n(s)})}),e.jsx(l.Item,{children:e.jsxs(g,{children:[e.jsx(m,{type:"primary",onClick:x,children:"提交"}),e.jsx(m,{onClick:u,children:"重置"})]})})]})}),e.jsx(p,{title:"高级配置",style:{marginBottom:24},children:e.jsxs(l,{layout:"vertical",children:[e.jsx(l.Item,{label:"自定义尺寸限制",extra:"限制图片尺寸为 800x600，大小不超过 2MB",children:e.jsx(a,{action:"/sys/file/list/upload/image",mode:"single",maxWidth:800,maxHeight:600,maxSize:2})}),e.jsx(l.Item,{label:"裁剪功能 - 自由裁剪",extra:"启用裁剪功能，可自由调整裁剪区域",children:e.jsx(a,{action:"/sys/file/list/upload/image",mode:"single",croppable:!0})}),e.jsx(l.Item,{label:"裁剪功能 - 1:1 正方形",extra:"固定 1:1 比例裁剪，适合头像上传",children:e.jsx(a,{action:"/sys/file/list/upload/image",mode:"single",croppable:!0,cropperOptions:{aspect:1}})}),e.jsx(l.Item,{label:"裁剪功能 - 圆形裁剪",extra:"圆形裁剪模式，适合头像上传",children:e.jsx(a,{action:"/sys/file/list/upload/image",mode:"single",croppable:!0,cropperOptions:{cropShape:"round",aspect:1}})}),e.jsx(l.Item,{label:"裁剪功能 - 16:9 宽屏",extra:"固定 16:9 比例裁剪，适合横幅图片",children:e.jsx(a,{action:"/sys/file/list/upload/image",mode:"single",croppable:!0,cropperOptions:{aspect:16/9}})}),e.jsx(l.Item,{label:"禁用状态",children:e.jsx(a,{action:"/sys/file/list/upload/image",mode:"single",disabled:!0})})]})})]})};export{C as default};
|