Function UploadImage

Xmw_web/src/components/UploadImage/index.tsx:36–178

({
  value,
  onChange,
  type = 'upload',
  maxSize = 5, // 图片大小，默认5m
  fieldProps,
  imgCropProps = {
    rotationSlider: true,
    cropShape: 'round',
    showGrid: true,
  },
  ...uploadProps
})

} & (ProFormUploadButtonProps | ProFormUploadDraggerProps);

const UploadImage: FC<UploadImageProps> = ({
  value,
  onChange,
  type = 'upload',
  maxSize = 5, // 图片大小，默认5m
  fieldProps,
  imgCropProps = {
    rotationSlider: true,
    cropShape: 'round',
    showGrid: true,
  },
  ...uploadProps
}) => {
  // 多语言函数
  const { formatMessage } = useIntl();
  // hooks 调用
  const { message } = App.useApp();
  // 获取 Token
  const ACCESS_TOKEN = getLocalStorageItem<string>(LOCAL_STORAGE.ACCESS_TOKEN);
  // 上传图片loading
  const [uploadLoading, { setTrue: setUploadLoadingTrue, setFalse: setUploadLoadingFalse }] =
    useBoolean(false);
  // 文件列表
  const [fileList, setFileList] = useState<UploadFile[]>([]);
  // 上传回调
  const onChangeUpload: UploadProps['onChange'] = ({
    file,
    fileList,
  }: UploadChangeParam<UploadFile>) => {
    // 移除图片清空值
    if (file.status === 'removed') {
      onChange?.(undefined);
    } else {
      // 上传中
      if (file.status === 'uploading') {
        setUploadLoadingTrue();
      }
      // 上传完成
      if (file.status === 'done') {
        // 获取当前上传图片路径
        const path: string = get(file, 'response.data.path');
        setUploadLoadingFalse();
        onChange?.(path);
      }
    }
    setFileList(fileList);
  };

  /**
   * @description: 限制用户上传的图片格式和大小
   * @param {RcFile} file
   * @author: 白雾茫茫丶
   */
  const beforeUpload = (file: RcFile) => {
    // 获取限制的图片类型，默认全部
    const accept = get(fieldProps, 'accept');
    // 判断类型是否正确
    const isFileType = !accept || accept.includes(file.type);