@saberlayer/avatar-upload

一个基于 Ant Design 的头像上传组件，支持图片裁剪功能。

更新日志

v1.1.0

• 优化文件结构，统一构建输出到 dist 目录
• 简化包体积，移除冗余文件
• 保持对 CommonJS、ES Module 和 UMD 的完整支持
• 优化 TypeScript 类型声明文件位置

安装

npm install @saberlayer/avatar-upload
# 或
yarn add @saberlayer/avatar-upload

使用方法

支持多种导入方式：

ES Modules

import { AvatarUpload } from '@saberlayer/avatar-upload';
import '@saberlayer/avatar-upload/dist/index.css';

CommonJS

const { AvatarUpload } = require('@saberlayer/avatar-upload');
require('@saberlayer/avatar-upload/dist/index.css');

UMD

<link rel="stylesheet" href="https://unpkg.com/@saberlayer/avatar-upload/dist/index.css" />
<script src="https://unpkg.com/@saberlayer/avatar-upload/dist/index.umd.js"></script>

使用示例

import React from 'react';
import { AvatarUpload } from '@saberlayer/avatar-upload';
import '@saberlayer/avatar-upload/dist/index.css';

const App = () => {
  const handleChange = (url) => {
    console.log('头像地址：', url);
  };

  return (
    <AvatarUpload
      value="https://example.com/avatar.jpg"
      onChange={handleChange}
      maxSize={2} // 最大文件大小，单位MB，默认2MB
    />
  );
};

export default App;

API

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | value | 头像URL | string | - | | onChange | 头像变化时的回调函数 | (url: string) => void | - | | maxSize | 最大文件大小，单位MB | number | 2 |

特性

• 支持图片上传
• 支持图片裁剪
• 支持预览
• 支持文件大小限制
• 支持 JPG/PNG 格式
• 美观的 UI 界面
• 支持 TypeScript
• 支持 Tree Shaking
• 支持多种模块规范（ES Module/CommonJS/UMD）

开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建
npm run build

License

MIT

目录结构

dist/
  ├── index.cjs.js      # CommonJS 版本
  ├── index.cjs.js.map
  ├── index.esm.js      # ES Module 版本
  ├── index.esm.js.map
  ├── index.umd.js      # UMD 版本
  ├── index.umd.js.map
  ├── index.d.ts        # TypeScript 类型声明
  └── index.css         # 样式文件