@dailyboxes/box-react-img-upload

此仓库是个人项目使用，如要使用，请下载后根据自己的需求进行更改。

基于 react、antd 和 antd-img-crop 的 Web 图片上传裁剪组件。

组件特性：

• 支持图片裁剪
• 支持限制上传图片格式
• 返回裁剪后图片的 base64
• 返回原始文件后缀 suffix
• 支持受控回显

Install

npm install @dailyboxes/box-react-img-upload react react-dom antd antd-img-crop

Usage

import React, { useState } from 'react';
import { BoxReactImgUpload, ImgUploadResult } from '@dailyboxes/box-react-img-upload';

export default function Demo() {
  const [image, setImage] = useState('');

  const handleChange = (result: ImgUploadResult | ImgUploadResult[]) => {
    if (Array.isArray(result)) {
      return;
    }

    setImage(result.base64);
    console.log(result.base64, result.suffix);
  };

  return (
    <BoxReactImgUpload
      value={image}
      width={160}
      height={160}
      acceptedTypes={['image/png', 'image/jpeg', 'image/webp']}
      cropProps={{
        aspect: 1,
        rotationSlider: true,
        aspectSlider: true,
      }}
      onChange={handleChange}
    />
  );
}

Multiple Upload Without Crop

<BoxReactImgUpload
  enableCrop={false}
  multiple
  maxCount={3}
  onChange={(result) => {
    if (Array.isArray(result)) {
      console.log(result);
    }
  }}
/>

Disable Internal Preview

<BoxReactImgUpload
  showPreviewImage={false}
  onChange={(result) => {
    console.log(result.base64, result.suffix);
  }}
/>

Exports

import {
  BoxReactImgUpload,
  ImageCropUpload,
  DEFAULT_ACCEPTED_IMAGE_TYPES,
} from '@dailyboxes/box-react-img-upload';

Props

| Name | Type | Default | Description | | --- | --- | --- | --- | | value | string | undefined | 回显图片地址或 base64 | | onChange | (result: ImgUploadResult \| ImgUploadResult[]) => void | undefined | 单图模式返回对象，多图模式返回数组 | | onRemove | (file?: UploadFile) => void | undefined | 删除图片时触发 | | acceptedTypes | readonly string[] | 内置常见图片格式 | 允许上传的 MIME 类型 | | tips | string | '上传图片' | 上传提示文案 | | width | number \| string | 120 | 组件宽度 | | height | number \| string | 120 | 组件高度 | | disabled | boolean | false | 是否禁用 | | showPreviewImage | boolean | true | 是否在组件内部回显已上传图片 | | enableCrop | boolean | true | 是否开启裁剪，关闭后走普通上传 | | multiple | boolean | false | 非裁剪模式下是否允许多选 | | maxCount | number | 1 | 非裁剪模式下最多可选择的图片数量 | | cropProps | Omit<ImgCropProps, 'children'> | undefined | antd-img-crop 参数透传 |

其余属性会透传到 antd 的 Upload 组件。

Return Type

type ImgUploadResult = {
  base64: string;
  suffix: string;
  file: File;
};

组件版本依赖

• react: 18.x.x
• react-dom: 18.x.x
• @types/react: 18.x.x
• @types/react-dom: 18.x.x