代码拉取完成,页面将自动刷新
图片上传组件
import { Upload, UploadRef } from "@ls-design/ui-react";
export default () => {
const afterRead = (file) => {
console.log(file.file.name);
};
return <Upload onAfterread={afterRead} />;
};
默认开启预览功能
export default () => {
const preview = useRef<UploadRef>(null);
const previewUrls = [
"https://img.yzcdn.cn/vant/leaf.jpg",
"https://m.hellobike.com/resource/helloyun/15697/iWS-0QI6QV.png",
];
useEffect(() => {
preview.current.setPreview(previewUrls);
}, []);
return <Upload ref={preview} preview />;
};
超过数量,隐藏多余部分并且隐藏上传按钮
<Upload maxcount="2" preview />
maxsize 单位 B 起步,例如 1M 是 1024 * 1024
export default () => {
const oversize = useRef<UploadRef>(null);
const oversizeFn = () => {
console.log("有文件超过1KB了哦");
};
return <Upload maxsize="1024" ref={oversize} onOversize={oversizeFn} />;
};
<Upload>
<div slot="uploader">上传文件</div>
</Upload>
beforeUpload 返回 Boolean, false 阻止上传.
export default () => {
const before = useRef<UploadRef>(null);
const beforeUpload = (files) => {
const r = files.every((file) => file.type === "image/jpg");
if (!r) {
console.log("请上传 jpg 格式图片");
return false;
}
return true;
};
useEffect(() => {
before.current.beforeUpload = beforeUpload;
}, []);
return <Upload preview ref={before} />;
};
<Upload disabled></Upload>
<Upload preview readonly />
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
accept | 允许上传的文件类型 | string |
image/* |
multiple | 是否多选 | boolean |
true |
preview | 是否展示预览 | boolean |
false |
capture | 图片选取模式,可选值为 boolean (直接调起摄像头) |
false |
|
maxcount | 最大上传数量,超出隐藏 | string |
|
maxsize | 最大上传大小 | string |
26214400 (25M) |
disabled | 禁止上传 | boolean |
false |
hidedelete | 隐藏删除图标 | boolean |
false |
readonly | 只读模式 | boolean |
false |
onAfterread | 上传后回调 | (file: file or file[]) => void |
|
onOversize | 配合 maxsize 使用,超过大小回调函数 | (items: fiel[], maxsize: string) => void |
|
onRemove | 需配合 beforeDelete 不可单独使用 | (items: file[]) => void |
名称 | 说明 | 类型 |
---|---|---|
beforeUpload | 上传前置,用法 uploader.beforeUpload = fn | (fn: () => boolean) => void |
setPreview | 初始化预览数据,用法 uploader.setPreview(data) | (url: string[]) => void |
beforeDelete | 删除前置,用法 uploader.beforeDelet = fn | (file, {index: number}) => void |
closePreview | 关闭预览弹窗 |
名称 | 说明 |
---|---|
uploader | 自定义上传组件 |
组件提供了以下 CSS变量,可用于自定义样式
名称 | 说明 | 默认值 |
---|---|---|
--uploader-width |
上传、预览组件的宽度 | 93px |
--uploader-height |
上传、预览组件的高度 | 93px |
--uploader-border-width |
上传组件的边框 | 1px |
--uploader-border-color |
上传组件的边框色 | #E1E6EB |
--uploader-border-style |
上传组件的风格 | dashed |
--uploader-radius |
上传、预览组件的边框 | 4px |
--uploader-margin |
上传、预览组件右下间距 | 6px |
--uploader-delete-wrap-width |
预览删除按钮宽度 | 14px |
--uploader-delete-wrap-height |
预览删除按钮高度 | 14px |
--uploader-delete-background |
删除组件的背景色 | rgb(0, 0, 0) |
--uploader-delete-color |
删除组件图标颜色 | #fff |
--uploader-delete-size |
删除组件 图标大小 | 10px |
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。