1 Star 0 Fork 0

LS/ls-design

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
克隆/下载
zh-CN-react.md 5.74 KB
一键复制 编辑 原始数据 按行查看 历史

Upload


简介

图片上传组件

安装使用

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 />

Props

参数 说明 类型 默认值
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

Methods

名称 说明 类型
beforeUpload 上传前置,用法 uploader.beforeUpload = fn (fn: () => boolean) => void
setPreview 初始化预览数据,用法 uploader.setPreview(data) (url: string[]) => void
beforeDelete 删除前置,用法 uploader.beforeDelet = fn (file, {index: number}) => void
closePreview 关闭预览弹窗

Slots

名称 说明
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
Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/LShere/ls-design.git
git@gitee.com:LShere/ls-design.git
LShere
ls-design
ls-design
master

搜索帮助