FilePreviewItem 文件预览项

用于单个文件的预览展示，支持图片、文档、音视频等多种类型，支持预览、下载、删除等操作。默认采用卡片模式，也支持列表模式。

提示

1、演示示例依赖了公共hook的useCustomUpload,你也可以自行实现。
2、部分示例需结合后端运行后端示例

基础用法

列表显示（你可以自定义组的样式，注：此处的删除未请求接口）

是否允许删除

展示样式

卡片列表列表-简洁

方向

水平垂直

复制代码

查看代码

<template>
  <div class="attachment-wrapper">
    <s-file-preview-item
      v-for="fItem in files"
      :key="fItem.id"
      :canIdel="canIdel"
      :getPreviewUrl="getPreviewUrl"
      :onPreview="onPreview"
      @on-delete="handleDelFile"
      :file="fItem"
    />
  </div>
  <a-flex vertical class="mt-2">
    <a-space>
      是否允许删除
      <a-switch v-model:checked="canIdel" />
    </a-space>
  </a-flex>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { message } from "ant-design-vue";
import { useCustomUpload } from "speed-components/hooks/useCustomUpload";

const canIdel = ref(false);
const token = ref("speed-test-token");
const { files, handleDelFile } = useCustomUpload();
files.value = [
  {
    id: "test1",
    fileName: "test1.jpg",
    fileType: "image/jpeg",
    fileSize: 1024,
  },
  {
    id: "test2",
    fileName: "test2.jpg",
    fileType: "image/jpeg",
    fileSize: 1024,
  },
  {
    id: "test3",
    fileName: "test3.xlsx",
    fileType:
      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
    fileSize: 1024,
  },
  {
    id: "test4",
    fileName: "test4.docx",
    fileType:
      "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
    fileSize: 1024,
  },
];
// 模拟预览地址拼接(如果你在全局初始化配置了地址，这里就不用再配置了)
const getPreviewUrl = (fileId: string) => {
  return "//localhost:4000/attachment/preview/" + fileId + "?token=" + token.value;
};
// TODO: 文件类型预览需自行实现
const onPreview = (fileId: string) => {
  console.log(fileId);
  message.warning("文件类型预览需自行实现");
};
</script>
<style lang="less">
.attachment-wrapper {
  padding: 5px 0;
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 10px;
  // 设置不缩放
  :deep(.file-preview-item-wrapper) {
    margin: 0 5px;
    flex-shrink: 0;
  }
}
</style>

Props

参数	说明	类型	默认值
file	文件	'IFileItem'	-
fileType	文件类型	string	-
fileSize	文件大小	string	-
previewUrl	文件预览地址	string	-
mode	展示模式	'card' | 'list' | 'list-simple'	'card'
canIdel	是否允许删除	boolean	true
className	自定义类名	string	-

IFileItem

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

Events

事件名	说明	回调参数
on-delete	删除文件时触发	(id: string)

Slots

无

注意事项

1. 组件会根据文件后缀自动显示对应的占位图标或图片预览。
2. 仅支持通过文件名后缀简单判断类型，未做 MIME 校验。
3. 依赖 viewerjs 实现图片预览，需提前安装依赖。
4. 下载、预览等功能需后端接口支持。
5. 支持三种模式：卡片（默认）、列表、简洁列表。

---

如需批量文件预览，请结合列表循环使用。