Upload

文件、图片上传,文件空间

示例

基础用法

<cl-upload v-model="urls" />

多图上传

配置 multiple

<cl-upload v-model="urls" multiple />

文件上传

配置 typefile

<cl-upload v-model="urls" multiple text="文件上传" type="file" />

可拖拽

配置 draggablemultiple

<cl-upload v-model="urls" draggable multiple />

自定义内容

<cl-upload type="file" multiple custom-class="custom-upload">
	<el-button :icon="Upload">上传</el-button>

	<template #item="{ item }">
		<div class="item" v-show="item.url">{{ item.url }}</div>
	</template>
</cl-upload>

自定义大小

配置 size

<cl-upload text="选择图片" :size="[120, 200]" />

上传校验

配置 onBeforeUpload,返回 boolean 或者 Promise

<cl-upload :before-upload="onBeforeUpload" />
function onBeforeUpload(file: any, item: any) {
	ElMessage.warning("文件检测中");

	return new Promise((resolve) => {
		setTimeout(() => {
			ElMessage.success("文件检测通过");

			resolve(true);
		}, 2000);
	});
}

文件空间

<cl-upload-space />

组件

cl-upload

文件上传

参数

参数说明类型可选值默认值
v-model/modelValue图片地址string, array
accept文件类型string
type类型stringimage / fileimage
multiple是否多图上传booleanfalse
limit最大上传数量number9
limitSize最大上传大小number100
size组件大小number, string, array120
text文案string选择文件
showFileList是否显示上传图片列表booleantrue
draggable是否可拖拽booleanfalse
disabled是否禁用booleanfalse
customClass自定义样式名string
beforeUpload上传前function(file, item)

插槽

插槽说明
default选择上传区域
item上传列表的每一项

cl-upload-space

文件空间选择器

参数

参数说明类型可选值默认值
v-model/modelValue图片地址string
accept文件类型string
limit最大选择数量number9
showBtn是否显示上传按钮booleantrue

cl-upload-panel

文件管理面板

参数

参数说明类型可选值默认值
accept文件类型string
limit最大选择数量number9
selectable是否可选booleanfalse
Last Updated: