useCustomUpload 自定义上传 Hook

用于处理文件上传的自定义 Hook，支持文件大小、数量、类型的校验，以及上传、删除等操作。

提示

1、此hook采用覆盖request方式，如想配置action地址，可直接使用antd的Upload组件。
2、使用前请确保已配置好上传、删除、预览的后端接口（可在初始化时配置）。

基础用法

普通的input上传(多选)

复制代码

查看代码

<template>
    <input
      type="file"
      @change="handleFileChange"
      multiple
    />
    <div v-if="uploadLoading">上传中...</div>
    <div v-if="files.length > 0">
      <div v-for="file in files" :key="file.uid" class="file-item">
        <span>{{ file.fileName }}</span>
        <span v-if="file.status === 'uploading'">上传中...</span>
        <span v-else-if="file.status === 'error'">上传失败</span>
        <button v-else @click="handleDelFile(file.id)">删除</button>
      </div>
    </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { useCustomUpload } from "@/hooks/useCustomUpload";

// 定义上传选项
const uploadOptions = ref({
  multiple: true,
  // 上传后的回调
  afterUpload: (files: any[]) => {
    console.log("上传完成:", files);
  },
  // 删除后的回调
  afterDelete: (files: any[]) => {
    console.log("删除后剩余文件:", files);
  },
});

// 使用自定义上传hook
const { beforeUpload, customRequest, handleDelFile, uploadLoading, files } =
  useCustomUpload(uploadOptions);

// 处理文件选择
const handleFileChange = (event: Event) => {
  const input = event.target as HTMLInputElement;
  if (!input.files?.length) return;

  const files = Array.from(input.files);
  // 如果后端支持多文件上传，则直接上传
  // 检查文件是否符合要求
  if (files.every((file) => beforeUpload(file as any))) {
    // 执行上传
    customRequest({
      file: files,
      afterUpload: () => {
        // 清空input，允许重复选择相同文件
        input.value = "";
      },
    });
  }
};
</script>
<style scoped>
.file-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
  padding: 5px;
  border: 1px solid #eee;
  border-radius: 4px;
}

button {
  padding: 2px 8px;
  border: 1px solid #ff4d4f;
  color: #ff4d4f;
  background: white;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background: #ff4d4f;
  color: white;
}
</style>

结合antd的Upload组件

最大上传数: 1单个文件最大: 2MB接受的文件类型: .jpg, .png, .pdf

复制代码

查看代码

<template>
    <a-flex vertical gap="10px" class="mb-2">
      <span>最大上传数: {{ uploadOptions.maxCount }}</span>
      <span>单个文件最大: {{ uploadOptions.maxSize }}MB</span>
      <span>接受的文件类型: {{ uploadOptions.acceptTypes.join(', ') }}</span>
    </a-flex>
    <a-upload
      :file-list="files"
      :before-upload="beforeUpload"
      :custom-request="customRequest"
      @remove="handleDelFile"
      @preview="handlePreviewFile"
      @download="handleDownloadFile"
      :show-upload-list="{
        showRemoveIcon: true,
        showDownloadIcon: true,
        showPreviewIcon: true
      }"
    >
      <a-button>
        <upload-outlined /> 点击上传
      </a-button>
    </a-upload>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { UploadOutlined } from "@ant-design/icons-vue";
import { useCustomUpload, type IFileItem } from "speed-components-ui/hooks";
// 定义上传选项
const uploadOptions = ref({
  maxCount: 1, // 最大上传数量
  maxSize: 2, // 最大文件大小(MB)
  acceptTypes: ['.jpg', '.png', '.pdf'], // 接受的文件类型
  // 转换为upload组件要的格式(这里是单项)
  transformResult: (item: IFileItem) => {
    return {
      ...item,
      uid: item.id,
      name: item.fileName,
    }
  },
  // 上传后的回调
  afterUpload: (files: IFileItem[]) => {
    console.log("上传完成:", files);
  },
  // 删除后的回调
  afterDelete: (files: IFileItem[]) => {
    console.log("删除后剩余文件:", files);
  }
});


// 使用自定义上传hook
const { beforeUpload, customRequest, handleDelFile,
    handleDownloadFile,
    handlePreviewFile, files } =
  useCustomUpload(uploadOptions);
  </script>

<style scoped>
:deep(.ant-upload-list-item) {
  margin-top: 8px;
}
</style>

结合FilePreviewItem组件

最大上传数: 8单个文件最大: 50MB接受的文件类型: .jpg, .png, .pdf, .xlsx, .docx

复制代码

查看代码

<template>
    <a-flex vertical gap="10px" class="mb-2">
      <span>最大上传数: {{ uploadOptions.maxCount }}</span>
      <span>单个文件最大: {{ uploadOptions.maxSize }}MB</span>
      <span>接受的文件类型: {{ uploadOptions.acceptTypes.join(", ") }}</span>
    </a-flex>
    <div class="attachment-wrapper">
      <s-file-preview-item
        v-for="item in files"
        :key="item.id"
        className="disable-outside"
        :file="item"
        @on-delete="handleDelFile"
      />
    </div>
    <a-tooltip title="上传附件/图片(最多支持8个,单个大小不超过50M)">
      <a-upload
        :before-upload="beforeUpload"
        :custom-request="customRequest"
        :showUploadList="false"
        multiple
      >
        <a-button type="text" class="px-2">
          <paper-clip-outlined />
        </a-button>

      </a-upload>
    </a-tooltip>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { PaperClipOutlined } from "@ant-design/icons-vue";
import  { type IFileItem, useCustomUpload } from "speed-components-ui/hooks";
// 定义上传选项
const uploadOptions = ref({
  maxCount: 8, // 最大上传数量
  maxSize: 50, // 最大文件大小(MB)
  acceptTypes: [".jpg", ".png", ".pdf", ".xlsx", '.docx'], // 接受的文件类型
  // 上传后的回调
  afterUpload: (files: IFileItem[]) => {
    console.log("上传完成:", files);
  },
  // 删除后的回调
  afterDelete: (files: IFileItem[]) => {
    console.log("删除后剩余文件:", files);
  },
});

// 使用自定义上传hook
const { beforeUpload, customRequest, handleDelFile, files } =
  useCustomUpload(uploadOptions);
</script>

<style scoped lang="less">
.attachment-wrapper,
.placeholder-btn {
  flex-shrink: 0;
}
.attachment-wrapper {
  padding: 5px;
  width: 100%;
  display: flex;
  min-height: 60px;
  flex-wrap: nowrap;
  overflow-x: auto;
  :deep(.file-preview-item-wrapper) {
    margin: 0 5px;
    flex-shrink: 0;
  }
}
</style>  

参数说明

参数	说明	类型	默认值
options	配置项	Ref<IUploadOption> | ComputedRef<IUploadOption>	-

IUploadOption 配置项

参数	说明	类型	默认值
maxCount	最大上传数量(antd内置的maxCount不在支持，当为 1 时，始终用最新上传的代替当前)	number	-
multiple	是否需要批量上传（注意：这里是指附件为数组形式,默认为files[],调用的接口为api下的fileUploadMulti，antd upload设置了multiple，内部还是是调用多次的单次上传，估不需要设置此参数）	boolean	false
maxSize	单个文件最大大小(MB)	'number' | 'string'	-
acceptTypes	允许上传的文件类型	string[]	-
transformResult	上传结果转换函数(这里是单条)	(res: IFileItem) => any	-
afterUpload	上传完成后的回调	(files: IFileItem[]) => void	-
afterDelete	删除完成后的回调	(files: IFileItem[]) => void	-

IFileItem

参数	说明	类型	默认值
id	文件唯一标识	string	-
fileName	文件名	string	-
fileType	文件类型	string	-
fileSize	文件大小	'string' | 'number'	-
status	状态	'uploading' | 'done' | 'error'	-
previewUrl	文件预览地址	string	-

返回值

参数	说明	类型
files	文件列表	Ref<IFileItem[]>
uploadLoading	上传加载状态(本次上传，单/多)	Ref<boolean>
beforeUpload	上传前校验函数	(file: IFileItem, fileList?: IFileItem[]) => boolean
customRequest	自定义上传函数	(option: {file: IFileItem | IFileItem[];afterUpload?: (IFileItem[] => void)}) => Promise<void>
handleDelFile	删除文件函数	(file: IFileItem) => Promise<void>

注意事项

1. 文件类型校验目前仅通过文件名后缀判断，未做 MIME 类型校验(需要自己配置accept)
2. acceptTypes 这里和 antd accept 不同，为类型的后缀,如：'.jpg', '.png', '.pdf'
3. 上传前会自动进行文件大小、数量、类型的校验
4. customRequest 和antd原始的customRequest参数有一定差异，仅保留了file字段（简易传入数组）
5. 可以通过 transformResult 自定义上传结果的转换逻辑（这里为单条转换）

支持的acceptTypes

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