从0搭建vue3组件库:Upload文件上传组件

这篇文章我们将一步步实现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组件库专栏 将持续更新一些组件的实现。

下一篇

实现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

如果你觉得本篇文章对你有帮助的话，动动指头点个赞吧，你的鼓励将会是我持续创作的动力