FileUpload 文件上传

点击 / 拖拽 / 粘贴选文件；业务在 on-change 中自行上传云端；支持 oss-base 远程回显。

基础用法

本地维护文件列表，组件不负责云端上传。

<script setup lang="ts">
import { ref } from 'vue'
import { RdFileUpload, type UploadFileItem } from '@rd-element/ui'

const files = ref<UploadFileItem[]>([])
</script>

<template>
  <RdFileUpload v-model="files" hint="支持拖拽、粘贴，最多 5 个文件" />
</template>

云端上传钩子

添加文件后 status 为 ready，触发 onChange；业务上传完成后回写 success / fail 与 url（会再次触发 onChange）。

<script setup lang="ts">
import { ref } from 'vue'
import { RdFileUpload, type UploadFile } from '@rd-element/ui'

const files = ref<UploadFile[]>([])

async function handleUploadChange(file: UploadFile, fileList: UploadFile[]) {
  if (file.status !== 'ready' || !file.file) return
  file.status = 'uploading'
  files.value = [...fileList]
  try {
    // 业务自行上传 OSS，此处 mock
    await new Promise((r) => setTimeout(r, 600))
    file.status = 'success'
    file.url = 'https://example.com/mock/' + encodeURIComponent(file.name)
    file.fileUrl = '//crm-test/mock/' + encodeURIComponent(file.name)
  } catch {
    file.status = 'fail'
  }
  files.value = [...files.value]
}
</script>

<template>
  <RdFileUpload
    v-model="files"
    :on-change="handleUploadChange"
    hint="选文件后走 on-change 自行上传"
  />
</template>

远程回显

无本地 File 时，用 fileUrl / url + oss-base 拼展示地址；已是 http(s):// 全链接则不再拼接。

• 微信图片_20260327145152_105_2.jpg106.5 KB · 点击缩略图预览
• 已是全链接示例.png2.0 KB · 点击缩略图预览

<script setup lang="ts">
import { ref } from 'vue'
import { RdFileUpload, type UploadFileItem } from '@rd-element/ui'

const OSS_BASE = 'https://sz-dev-crm.oss-cn-shenzhen.aliyuncs.com'

const files = ref<UploadFileItem[]>([
  {
    uid: '0a0eab5c94d68b9fe49e9e2dbf01f3c6b39d91f4',
    name: '微信图片_20260327145152_105_2.jpg',
    size: 109006,
    type: 'image/jpeg',
    status: 'success',
    fileUrl: '//crm-test/2026/07/20/0a0eab5c94d68b9fe49e9e2dbf01f3c6b39d91f4.jpg',
    fileName: '微信图片_20260327145152_105_2.jpg',
    fileSha1: '0a0eab5c94d68b9fe49e9e2dbf01f3c6b39d91f4',
    fileSize: '109006',
    fileSuffix: 'jpg',
  },
])
</script>

<template>
  <RdFileUpload v-model="files" :oss-base="OSS_BASE" :max-count="10" />
</template>

API

Attributes

属性名	说明	类型	默认值
v-model	文件列表（UploadFileItem[]）	UploadFileItem[]	[]
accept	accept 属性	string	常见文档/图片
multiple	多文件	boolean	true
maxCount	最大文件数	number	5
maxSizeMb	单文件大小上限 MB	number	10
hint	底部提示文案	string	自动生成
onChange	文件状态钩子：添加（ready）、变为 success / fail 时调用；业务在此上传云端并回写 status / url	(file, files) => void	—
ossBase	OSS 域名或前缀；fileUrl/url 已是 http(s) 全链接时不再拼接	string	''

Events

事件名	说明	类型
update:modelValue	文件列表变更	(files: UploadFileItem[]) => void
change	文件列表整表变更	(files: UploadFileItem[]) => void

UploadFileItem

字段	说明	类型
uid	唯一键	string
name / size / type	展示用元数据	string / number / string
file	本地新选才有；纯回显可无	File?
status	ready | uploading | success | fail	string?
url	完整可访问地址	string?
fileUrl	相对或绝对 path	string?
fileName / fileSha1 / fileSize / fileSuffix	远程透传字段	可选
percent / response	进度与原始响应	可选

类型别名：UploadFile、UploadFiles。