封装一个vue3的文件上传组件(拖拽或点击选择文件)

1. 效果

在这里插入图片描述

选择文件后:
在这里插入图片描述

2. 代码

<template><divclass="drop-zone c-normal":class="{borderOutline: outline,}"@dragover.prevent@drop.prevent="handleDrop"@click="chooseFiles"><div v-if="files.length < 1" class="flex items-center justify-center"><slot name="blank"><div class="f-6"><svg-icon icon-class="upload-fill"></svg-icon></div></slot></div><div v-if="files.length < 1"><slot name="title" :is-dragging="isDragging"><div v-if="!isDragging" class="upload-instructions f6">点击或将文件拖到这里上传</div><div v-else class="dragging-feedback">释放以上传文件</div></slot></div><div class="flex items-center"><div v-for="(file, index) in files" :key="index" class="flex file-item pa2 flex-column"><div class="f2 pa2"><svg-icon icon-class="file" /></div><div class="f6 truncate">{{ file.name }}</div><div class="delete-icon" @click.stop="removeFile(index)"><svg-icon icon-class="delete" /></div></div></div><input ref="fileInput" type="file" multiple style="display: none" @change="inputChange" /></div>
</template>
<script lang="ts" setup>
import { computed, ref } from 'vue';
import SvgIcon from '@/components/SvgIcon/SvgIcon.vue';type Prop = {outline?: boolean;maxFiles?: number;data: any;fileChange?: (data: any) => boolean | Promise<boolean>;
};const props = withDefaults(defineProps<Prop>(), {outline: true,maxFiles: -1,data: [],fileChange: () => true,
});const emits = defineEmits(['update:data']);const isDragging = ref(false);
const files = computed({get() {return props.data;},set: async (val) => {const flag = await props.fileChange(val);if (val.length > props.maxFiles){//:TODO 这里需要自定义一哈console.log('最多只能上传'+props.maxFiles+'个文件');return}if (flag === false) {return;}emits('update:data', val);},
});
const fileInput = ref<HTMLInputElement>();const handleDrop = (e: DragEvent) => {isDragging.value = false;const newFiles: File[] | any = e.dataTransfer?.files || [];files.value = [...files.value, ...newFiles];
};const chooseFiles = () => {if (fileInput.value) {fileInput.value.click();}
};const inputChange = (e: Event) => {const target = e.target as HTMLInputElement;const newFiles = target.files || [];files.value = [...files.value, ...newFiles];
};const removeFile = (index: number) => {files.value.splice(index, 1);
};
</script><style lang="scss" scoped>
/*这里的我用的是外部的公共样式, 实际并没有在组件内, 这里将用到的样式复制在下面了*/
:root{--c-normal: #a6a5ad;
}
.flex {display: flex;
}
.items-center {align-items: center;
}
.justify-center {justify-content: center;
}
.c{&-normal{color: var(--c-normal);}
}
.f2 {font-size: 2.25rem;
}
.pa2 {padding: 0.5rem;
}
.f-6,
.f-headline {font-size: 6rem;
}
.truncate {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}
/* ↑↑↑ 上面都是引用的公共样式  */
.drop-zone {box-sizing: border-box;width: 100%;height: 100%;padding: 20px;text-align: center;min-height: 150px;overflow-y: auto;&.borderOutline {border: 2px dashed #aaa;}.dragging-feedback {background-color: var(--c-normal);}.upload-instructions {margin-bottom: 10px;}.file-item {position: relative;width: 6rem;.delete-icon {position: absolute;top: 5px;right: 5px;cursor: pointer;color: var(--c-normal);&:hover {color: #1a1a1a;}}}
}
</style>

这个组件引入了 <svg-icon/>这个组件(这里可以替换为自己需要的组件), svg-icon 这个组件的封装可以参考这篇文章: vue3 + vite +ts 封住昂svg-icon组件

这篇文章距离现在时间比较长了, 可能会有一些版本问题, 若遇问题可参考其他相似的文章

如果有什么问题或建议欢迎评论或留言

3. 组件说明

prop参数

name	说明	默认值
outline	外边框	true
maxFiles	最大文件数(大于-1时生效)	-1
data	文件数据(双向绑定的)	[]
fileChange	当文件变化时生效需返回一个`boolen或Promise<boolean>`类型	()=>true