Upload 上传

选择并管理待上传文件。默认提供本地 mock 进度；可通过 http-request 接入真实上传，支持中断与分片钩子（不绑定云厂商 SDK）。

基础用法

<script setup>
import { ref } from 'vue'
import { DanUpload } from '@dandan-ui/ui'

const fileList = ref([])
</script>

<template>
  <DanUpload v-model:file-list="fileList" multiple :limit="3" />
</template>

拖拽上传

将文件拖到此处，或点击上传

最多上传 2 个文件

<script setup>
import { ref } from 'vue'
import { DanMessage, DanUpload } from '@dandan-ui/ui'

const fileList = ref([])

function onExceed() {
  DanMessage.warning('最多上传 2 个文件')
}
</script>

<template>
  <DanUpload
    v-model:file-list="fileList"
    drag
    multiple
    :limit="2"
    @exceed="onExceed"
  />
</template>

可中断与分片上传

httpRequest 可返回 { abort }；组件暴露 abort / abortAll / retry。设置 chunk-size 后按片调用同一 handler，并传入 chunk 元数据。

<script setup lang="ts">
import { ref } from 'vue'
import { DanUpload } from '@dandan-ui/ui'
import type {
  DanUploadInstance,
  UploadChunkInfo,
  UploadFile,
  UploadRequestOptions,
} from '@dandan-ui/ui'

const fileList = ref<UploadFile[]>([])
const uploadRef = ref<DanUploadInstance>()

/**
 * 自定义直传 / 分片示例（伪代码，不绑定任何云厂商 SDK）。
 * 真实场景可在此对接任意对象存储的预签名 URL 或后端分片接口。
 */
function httpRequest(options: UploadRequestOptions) {
  const { file, chunk, onProgress, onSuccess, onError } = options
  let aborted = false
  let percent = 0
  const body = chunk?.blob ?? file
  const timer = window.setInterval(() => {
    if (aborted) {
      window.clearInterval(timer)
      return
    }
    percent = Math.min(100, percent + 40)
    onProgress(percent)
    if (percent >= 100) {
      window.clearInterval(timer)
      onSuccess({
        ok: true,
        name: file.name,
        chunkIndex: chunk?.index,
        size: body.size,
      })
    }
  }, 60)

  return {
    abort: () => {
      aborted = true
      window.clearInterval(timer)
      onError(new Error('aborted'))
    },
  }
}

function beforeChunkUpload(chunk: UploadChunkInfo) {
  console.info('chunk', chunk.index + 1, '/', chunk.total)
  return true
}
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px; max-width: 420px">
    <DanUpload
      ref="uploadRef"
      v-model:file-list="fileList"
      multiple
      :chunk-size="1024"
      :before-chunk-upload="beforeChunkUpload"
      :http-request="httpRequest"
    />
    <div style="display: flex; gap: 8px">
      <button type="button" @click="uploadRef?.abortAll()">中断全部</button>
      <button
        type="button"
        @click="fileList[0] && uploadRef?.retry(fileList[0])"
      >
        重试首个
      </button>
    </div>
  </div>
</template>

Upload Props

属性	说明	类型	默认值
fileList / v-model:fileList	文件列表	UploadFile[]	[]
accept	接受的文件类型	string	''
multiple	是否多选	boolean	false
disabled	禁用	boolean	false
limit	最大上传数量	number	—
drag	是否启用拖拽	boolean	false
autoUpload	选中后是否自动上传	boolean	true
httpRequest	自定义上传方法	UploadRequestHandler	内置 mock
chunkSize	分片大小（字节）；>0 且文件更大时启用分片	number	0
beforeChunkUpload	每片上传前钩子，返回 false 中断	(chunk, file) => boolean | Promise<boolean>	—

Upload Events

事件	说明	参数
change	文件状态改变	(file, fileList)
remove	移除文件	(file, fileList)
exceed	超出 limit	(files, fileList)
success / error / progress	上传过程	见类型

Upload 方法

通过 ref 调用：submit()、clearFiles()、openFileDialog()、abort(file?)、abortAll()、retry(file)。