@duskmoon-dev/el-file-upload (中文(简体) )
使用 Web 组件构建的文件上传组件, 并带有拖放支持 .
安装
bun add @duskmoon-dev/el-file-upload
使用量
自动注册
import '@duskmoon-dev/el-file-upload/register';
<el-dm-file-upload></el-dm-file-upload>
手工登记
import { ElDmFileUpload, register } from '@duskmoon-dev/el-file-upload';
// Register with default tag name
register();
// Or register with custom tag name
customElements.define('my-file-upload', ElDmFileUpload);
大小
| 大小 | 说明 |
|---|
sm | 小型上传区域 |
md | 中度上传区域( 默认) |
lg | 大型上传区域 |
属性
| 属性 | 类型 | 默认 | 说明 |
|---|
accept | string | '' | 接受文件类型 |
multiple | boolean | false | 允许多个文件 |
disabled | boolean | false | 禁用上传 |
max-size | number | - 说吧 | 以字节表示的最大文件大小 |
max-files | number | - 说吧 | 最大文件数 |
show-preview | boolean | false | 显示文件预览 |
compact | boolean | false | 压缩显示模式 |
size | string | 'md' | 大小变体 : sm, (中文(简体) ), md, (中文(简体) ), lg |
CSS 组件
| 编 | 说明 |
|---|
dropzone | 投放区 |
file-list | 选定文件列表 |
活动
| 活动 | 细节 | 说明 |
|---|
change | { files } | 选中文件时已开火 |
remove | { file, index } | 删除文件时已开火 |
实例
基础
<el-dm-file-upload></el-dm-file-upload>
接受特定类型
<el-dm-file-upload accept="image/*"></el-dm-file-upload>
<el-dm-file-upload accept=".pdf,.doc,.docx"></el-dm-file-upload>
多个文件
<el-dm-file-upload multiple></el-dm-file-upload>
预览
<el-dm-file-upload show-preview accept="image/*"></el-dm-file-upload>
大小限制
<el-dm-file-upload max-size="5242880" max-files="5"></el-dm-file-upload>
压缩模式
<el-dm-file-upload compact></el-dm-file-upload>
处理文件
const upload = document.querySelector('el-dm-file-upload');
upload.addEventListener('change', (e) => {
const files = e.detail.files;
// Handle the files
});
许可证
麻省理工学院