跳到主要内容

Upload 上传

文件上传组件，支持可选的图片裁剪功能。

来源： 封装 antd Upload 并提供 VEF 图片裁剪增强。完整文档：Ant Design Upload

VEF 增强说明​

VEF 新增了 enableCrop 和 cropperProps，通过 antd-img-crop 在上传前进行图片裁剪。

基础用法​

import { Upload } from '@vef-framework-react/components';

export default function Demo() {
  return (
    <Upload
      action="/api/upload"
      listType="text"
      onChange={(info) => console.log(info)}
    >
      <button>点击上传</button>
    </Upload>
  );
}

图片上传带裁剪​

import { Upload } from '@vef-framework-react/components';

export default function Demo() {
  return (
    <Upload
      action="/api/upload"
      listType="picture-card"
      enableCrop
      cropperProps={{ aspectRatio: 1 }}
      maxCount={1}
    >
      <div>+ 上传</div>
    </Upload>
  );
}

粘贴上传​

<Upload action="/api/upload" pastable>
  <button>上传或粘贴</button>
</Upload>

API​

继承 Ant Design UploadProps，另有：

属性类型默认值说明
enableCropbooleanfalse上传前启用图片裁剪
cropperPropsImgCropProps（不含 children）—图片裁剪器配置
pastablebooleanfalse允许从剪贴板粘贴图片

其他属性请参阅 Ant Design Upload 文档。