Upload 图片上传
拖拽区 / 按钮两种触发形态,客户端压缩为原图 / WebP / AVIF 多份输出,内置 XHR 字节级真实上传进度,onProgress 实时回调。单文件限制(maxCount: 1)时拖拽容器承载大图预览,URL 导入入口在图片框内,右上角 ✕ 一键清空全部上传项。
操作日志
暂无日志,上传图片后将在此显示
import { ImageUpload } from "@qingwu-ui/upload";
import "@qingwu-ui/upload/style.css"; // 按钮形态样式已内置
useEffect(() => {
const el = rootRef.current;
if (!el) return;
uploaderRef.current = new ImageUpload(el, {
maxCount: 1, // 数量上限
url: "/api/upload", // 内置 XHR 上传(字节级真实进度)
onProgress: (item) => console.log(item.progress), // 每项上传进度回调
});
return () => uploaderRef.current?.destroy();
}, []);
return <div ref={rootRef} />;