CustomUpload 自定义上传组件

基于 useCustomUpload hook 封装的文件上传组件，意在简化a-upload使用(仅提供基础配置)。

提示

1、请先配置全局请求配置,api中的附件方法
2、如有自定义的上传，可参照useCustomUpload自行封装。

基础用法

默认显示为文件上传

此模式下默认不会限制上传文件类型，你可以通过传入acceptList进行覆盖。

files：[]

图片显示

内置图片规则：.jpg,.png,.jpeg,.svg, 你可以通过传入acceptList进行覆盖。

上传图片

files：[]

自定义触发按钮

files：[]

复制代码

查看代码

<template>
    <div class="demo-wrapper">
        <div class="demo-item">
        <h3>默认显示为文件上传</h3>
        <div class="mb-2">此模式下默认不会限制上传文件类型，你可以通过传入acceptList进行覆盖。</div>
        <s-custom-upload
          v-model:value="files3"
        />
        <a-space> files：{{ files3 }} </a-space>
      </div>
      <div class="demo-item">
        <h3>图片显示</h3>
        <div class="mb-2">内置图片规则：.jpg,.png,.jpeg,.svg, 你可以通过传入acceptList进行覆盖。</div>
        <s-custom-upload type="picture" v-model:value="files" />
        <a-space> files：{{ files }} </a-space>
      </div>

      <div class="demo-item">
        <h3>自定义触发按钮</h3>
        <s-custom-upload v-model:value="files2">
          <template #trigger>
            <a-button type="primary"> <upload-outlined /> 自定义触发 </a-button>
          </template>
        </s-custom-upload>
        <a-space> files：{{ files2 }} </a-space>
      </div>

     
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { UploadOutlined } from "@ant-design/icons-vue";
import type { IFileItem } from "speed-components-ui/hooks";

const files = ref<IFileItem[]>([]);
const files2 = ref<IFileItem[]>([]);
const files3 = ref<IFileItem[]>([]);

</script>
<style scoped lang="less">
.demo-wrapper {
  .demo-item {
    margin-bottom: 24px;
    h3 {
      margin-bottom: 16px;
      margin-top: 0;
      font-weight: 500;
    }
  }
}
</style>

API

Props

参数	说明	类型	默认值
value(v-model)	上传文件列表	IFileItem[]	[]
maxCount	最大上传数量	number	8
maxSize	单个文件最大大小(MB)	number	50
acceptTypes	接受的文件类型'见底部'	string[]	[]
multiple	是否支持多选	boolean	false
showFileList	是否显示文件列表	boolean	true
name	发到后台的文件参数名	string	files[]
data	上传所需参数或返回上传参数的方法	'object' | '((file: IFileItem) => object)'	-

Events

事件名	说明	回调参数
afterUpload	上传完成后触发	(files: IFileItem[]) => void
afterDelete	删除文件后触发	(files: IFileItem[]) => void

Slots

名称	说明
trigger	自定义触发(仅type为file时生效)

支持的acceptTypes

.jpeg, .jpg, .png, .svg, .xls, .xlsx, .zip, .rar, .doc, .docx, .mp4, .mpeg, .avi, .pdf, .ppt, .pptx, .txt, .mp3