这篇文章我们将一步步实现Upload文件上传组件,本次将采用setup语法糖的形式来实现这个组件，因为setup语法实在太好用啦。
创建目录结构
同样的我们和前面组件一样先创Upload组件的目录结构，以及其导出方式。目录结构如下图
其中style为样式，types.ts是我们组件需要接收的属性(props),index.ts将组件导出。而src/index.ts则是将我们所有组件集中导出的地方。
- upload.vue
<template> <div class="k-upload"> <input type="file"> </div> </template> <script lang="ts"> import { defineComponent } from 'vue' export default defineComponent({ name: 'k-upload' }); </script>
upload/index.ts
import upload from './upload.vue' import { withInstall } from '@kitty-ui/utils' export default withInstall(upload)
withInstall就是给组件赋予install方法的函数，便于app.use(xx)使用
import type { App, Plugin } from "vue" type SFCWithInstall<T> = T & Plugin export default <T>(comp: T) => { (comp as SFCWithInstall<T>).install = (app: App) => { //注册组件 app.component((comp as any).name, comp) } return comp as SFCWithInstall<T> }
- src/index.ts
export { default as Button } from './button' export { default as Icon } from './Icon' export { default as Link } from './link' export { default as Upload } from './upload'
目录搭建完毕我们就可以启动我们的vue3测试项目并引入Upload组件进行我们组件的开发啦
//app.vue <template> <div class="upload-demo"> <Upload></Upload> </div> </template> <script lang="ts" setup> import { Upload } from 'kitty-ui' </script> <style lang="less"> .upload-demo { width: 400px; } </style>
原生input处理
我们的Upload组件肯定是不能用原生的input样式，所以我们要做的是将原生input隐藏（注意这个隐藏是display:none）,所以vue中我们可以使用v-show。然后点击其它元素触发原生input的click事件从而调起系统文件选择，选择完毕后我们可以在原生input的change事件中获取到我们选中的文件。下面我们看一下在vue中如何实现
- upload.vue
<template> <div class="k-upload"> <input type="file" ref="kIpt" @change="getFiles" v-show="false"> <div @click="fileUpload"> <slot /> </div> </div> </template> <script lang="ts"> import { defineComponent } from 'vue' export default defineComponent({ name: 'k-upload' }); </script> <script setup lang="ts"> import { ref, defineEmits } from 'vue' import './style/index.less' //获取dom元素 const kIpt = ref() const emits = defineEmits(['getFilesList']) const filesList = ref<File[]>([]) const fileUpload = () => { //触发input点击事件 kIpt.value.click() } //获取文件列表 const getFiles = (e: Event) => { const files = (e.target as HTMLInputElement).files if (!files) return filesList.value.push(...Array.from(files)) //将文件列表传给父组件 emits('getFilesList', filesList.value) } </script>
然后在app.vue中使用
<template> <div class="upload-demo"> <Upload> <Button type="primary" size="small">文件上传</Button> </Upload> </div> </template> <script lang="ts" setup> import { Upload, Button } from 'kitty-ui' </script> <style lang="less"> .upload-demo { width: 400px; } </style>
此时点击按钮便可获取到文件
接下来我们要做的是要将我们选择的文件展示出来，并且可以删除
展示文件列表
其实很简单，只需遍历选中文件数组filesList即可。
<template> <div class="k-upload"> <input type="file" ref="kIpt" @change="getFiles" v-show="false"> <div @click="fileUpload"> <slot /> </div> <div class="k-upload-list"> <div class="k-upload-list_item" v-for="(item, index) in filesList" :key="index"> <div class="k-upload-list_item-name"> {{ item.name }} </div> <div class="k-upload-list_item-status-label"> <Icon name="ashbin" @click="delFile(index)" /> </div> </div> </div> </div> </template> <script lang="ts"> ... //删除 const delFile = (index: number) => { filesList.value.splice(index, 1) emits('getFilesList', filesList.value) } </script>
其中样式如下style/index.less
.k-upload { .k-upload-list { .k-upload-list_item:first-child { margin-top: 10px; } .k-upload-list_item { transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1); font-size: 14px; color: #606266; line-height: 1.8; margin-top: 5px; position: relative; box-sizing: border-box; border-radius: 4px; width: 100%; .k-upload-list_item-name { color: #606266; display: block; margin-right: 40px; overflow: hidden; padding-left: 4px; text-overflow: ellipsis; transition: color 0.3s; white-space: nowrap; } .k-upload-list_item-status-label { position: absolute; right: 5px; top: 0; line-height: inherit; } &:hover { .k-upload-list_item-name { color: #409eff; } cursor: pointer; background: #f5f7fa; } } } }
最终效果如下图
定义props
在types.ts中我们暂时先接收multiple和accept属性来控制是否能多选以及接收文件类型
import { ExtractPropTypes } from 'vue' export const uoloadType = { multiple: Boolean, accept: String } export type LinkProps = ExtractPropTypes<typeof uoloadType>
然后在组件中引入并使用这个类型upload.vue
<template> <div class="k-upload"> <input type="file" :multiple="props.multiple" :accept="props.accept" ref="kIpt" @change="getFiles" v-show="false"> <div @click="fileUpload"> <slot /> </div> <div class="k-upload-list"> <div class="k-upload-list_item" v-for="(item, index) in filesList" :key="index"> <div class="k-upload-list_item-name"> {{ item.name }} </div> <div class="k-upload-list_item-status-label"> <Icon name="ashbin" @click="delFile(index)" /> </div> </div> </div> </div> </template> <script setup lang="ts"> ... //引入类型 import { uoloadType } from './types' const props = defineProps(uoloadType) ... </script>
最后我们在 app.vue中传入这两个属性
<template> <div class="upload-demo"> <Upload @getFilesList="getFilesList" multiple accept="image/*"> <Button type="primary" size="small">文件上传</Button> </Upload> </div> </template> <script lang="ts" setup> import { Upload, Button } from 'kitty-ui' const getFilesList = (files: File[]) => { console.log(files) } </script> <style lang="less"> .upload-demo { width: 400px; } </style>
然后就会发现可以进行多选了并且只能选择图片类型的文件。
这里实现的Upload组件最终是将文件抛出给了使用者，至于如何使用这些文件（上传，预览等）则由开发者自己定义了。
下篇文章将介绍文件Upload组件如何实现拖拽上传的。欢迎关注 从零搭建Vue3组件库专栏 将持续更新一些组件的实现。
下一篇
写在最后
源码地址 kitty-ui，可以直接clone使用（顺手点个star呗），使用方法：
- 安装
pnpm npm i pnpm -g - 安装所有依赖
pnpm install - 启动本地调试vue3项目
pnpm run exm:dev - 打包
pnpm run build - 启动文档
pnpm run docs:dev - 打包文档
pnpm run docs:build - 启动打包后文档服务
pnpm run docs:serve
