这篇文章我们将一步步实现Upload文件上传组件,本次将采用setup语法糖的形式来实现这个组件，因为setup语法实在太好用啦。

创建目录结构

同样的我们和前面组件一样先创Upload组件的目录结构，以及其导出方式。目录结构如下图

其中style为样式，types.ts是我们组件需要接收的属性(props),index.ts将组件导出。而src/index.ts则是将我们所有组件集中导出的地方。

• upload.vue

   import { defineComponent } from 'vue' export default defineComponent({  name: 'k-upload' }); " _ue_custom_node_="true">

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 & Plugin export default(comp: T) => {  (comp as SFCWithInstall).install = (app: App) => {  //注册组件  app.component((comp as any).name, comp)  }  return comp as SFCWithInstall}

• 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    import { Upload } from 'kitty-ui' " _ue_custom_node_="true">.upload-demo {  width: 400px; } " _ue_custom_node_="true">

原生input处理

我们的Upload组件肯定是不能用原生的input样式，所以我们要做的是将原生input隐藏（注意这个隐藏是display:none）,所以vue中我们可以使用v-show。然后点击其它元素触发原生input的click事件从而调起系统文件选择，选择完毕后我们可以在原生input的change事件中获取到我们选中的文件。下面我们看一下在vue中如何实现

• upload.vue

      import { defineComponent } from 'vue' export default defineComponent({  name: 'k-upload' }); " _ue_custom_node_="true">import { ref, defineEmits } from 'vue' import './style/index.less' //获取dom元素 const kIpt = ref() const emits = defineEmits(['getFilesList']) const filesList = ref([]) 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) } " _ue_custom_node_="true">

然后在app.vue中使用

   文件上传  import { Upload, Button } from 'kitty-ui' " _ue_custom_node_="true">.upload-demo {  width: 400px; } " _ue_custom_node_="true">

此时点击按钮便可获取到文件

接下来我们要做的是要将我们选择的文件展示出来，并且可以删除

展示文件列表

其实很简单，只需遍历选中文件数组filesList即可。

         { { item.name }}        ... //删除 const delFile = (index: number) => {  filesList.value.splice(index, 1)  emits('getFilesList', filesList.value) } " _ue_custom_node_="true">

其中样式如下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

然后在组件中引入并使用这个类型upload.vue

  <input type="file" :multiple="props.multiple" :accept="props.accept" ref="kIpt" @change="getFiles"  v-show="false">        { { item.name }}        ... //引入类型 import { uoloadType } from './types' const props = defineProps(uoloadType) ... " _ue_custom_node_="true">

最后我们在 app.vue中传入这两个属性

   文件上传  import { Upload, Button } from 'kitty-ui' const getFilesList = (files: File[]) => {  console.log(files) } " _ue_custom_node_="true">.upload-demo {  width: 400px; } " _ue_custom_node_="true">

然后就会发现可以进行多选了并且只能选择图片类型的文件。

这里实现的Upload组件最终是将文件抛出给了使用者，至于如何使用这些文件（上传，预览等）则由开发者自己定义了。

下篇文章将介绍文件Upload组件如何实现拖拽上传的。欢迎关注 从零搭建Vue3组件库专栏 将持续更新一些组件的实现。

下一篇

实现Upload组件文件拖拽上传

写在最后

源码地址 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