0.0.4

Upload 上传 ​

通过点击或拖拽上传文件。

基础用法 ​

使用插槽自定义按钮类型与文案。通过 limit 与 on-exceed 限制最大上传数量及超出时的行为。可在 before-remove 钩子中阻止删除。

jpg/png files with a size less than 500KB.
  • uniboot-ui-logo.svg
  • uniboot-ui-logo2.svg

覆盖上一个文件 ​

设置 limit 与 on-exceed，在选择新文件时自动替换上一个文件。

limit 1 file, new file will cover the old file

    用户头像 ​

    使用 before-upload 限制文件格式与大小。

    上传图片

    照片墙 ​

    使用 list-type 改变文件列表样式。

    • press delete to remove
    • press delete to remove
    • press delete to remove
    • press delete to remove
    • press delete to remove
    • press delete to remove
    • press delete to remove
    • press delete to remove

    自定义缩略图 ​

    使用作用域插槽自定义默认缩略图模板。

      上传图片

    带缩略图的文件列表 ​

    jpg/png files with a size less than 500kb

    文件列表控制 ​

    使用 on-change 钩子控制上传文件列表。

    jpg/png files with a size less than 500kb
    • man.png

    拖拽上传 ​

    将文件拖拽到指定区域即可上传。

    Drop file here or click to upload
    jpg/png files with a size less than 500kb

      上传文件夹 ​

      通过 directory 属性启用文件夹上传。

      启用后仅可选择文件夹，选中后文件夹内文件会被打平处理。

      Drop directory here or click to upload

        手动上传 ​

        jpg/png files with a size less than 500kb

          API ​

          属性 ​

          名称说明类型默认值
          action required上传请求地址string#
          headers请求头object—
          method上传请求方法stringpost
          multiple是否支持多选文件booleanfalse
          data上传时附带的额外参数；自 v2.3.13 起支持 Awaitable 数据与函数返回object / Function{}
          name上传文件字段名stringfile
          with-credentials是否携带 Cookiebooleanfalse
          show-file-list是否显示已上传文件列表booleantrue
          drag是否启用拖拽上传booleanfalse
          accept接受的文件类型，thumbnail-mode === true 时不生效string''
          crossorigin原生 crossorigin 属性enum—
          on-preview点击已上传文件时的钩子Function—
          on-remove移除文件时的钩子Function—
          on-success上传成功时的钩子Function—
          on-error上传失败时的钩子Function—
          on-progress上传进度变化时的钩子Function—
          on-change文件状态改变时（选择、成功、失败）的钩子Function—
          on-exceed超出 limit 时的钩子Function—
          before-upload上传前钩子，参数为待上传文件；返回 false 或返回被拒绝的 Promise 将中止上传Function—
          before-remove删除前钩子，参数为文件与文件列表；返回 false 或返回被拒绝的 Promise 将中止删除Function—
          file-list / v-model:file-list默认已上传文件列表array[]
          list-type文件列表类型enumtext
          auto-upload是否选取后自动上传booleantrue
          http-request覆盖默认 XHR 行为，自定义上传请求FunctionajaxUpload 实现
          disabled是否禁用booleanfalse
          limit最大允许上传数量number—
          directory是否支持上传文件夹；启用后仅可选择文件夹，文件会被打平booleanfalse

          插槽 ​

          名称说明类型
          default自定义默认内容-
          trigger触发文件选择对话框的内容-
          tip提示说明内容-
          file缩略图模板内容object

          暴露 ​

          名称说明类型
          abort取消上传请求。传入 file 时取消对应上传；不传则取消所有进行中的上传Function
          submit手动上传文件列表Function
          clearFiles清空文件列表（在 before-upload 钩子中不可用）Function
          handleStart手动选择文件Function
          handleRemove手动移除文件。file 与 rawFile 已合并；rawFile 将在 v2.2.0 移除Function

          类型声明 ​

          显示类型声明
          ts
          type UploadFiles = UploadFile[]

type UploadUserFile = Omit<UploadFile, 'status' | 'uid'> &
  Partial<Pick<UploadFile, 'status' | 'uid'>>

type UploadStatus = 'ready' | 'uploading' | 'success' | 'fail'

type Awaitable<T> = Promise<T> | T

type Mutable<T> = { -readonly [P in keyof T]: T[P] }

interface UploadFile {
  name: string
  percentage?: number
  status: UploadStatus
  size?: number
  response?: unknown
  uid: number
  url?: string
  raw?: UploadRawFile
}

interface UploadProgressEvent extends ProgressEvent {
  percent: number
}

interface UploadRawFile extends File {
  uid: number
  isDirectory?: boolean
}

interface UploadRequestOptions {
  action: string
  method: string
  data: Record<string, string | Blob | [string | Blob, string] | string[]>
  filename: string
  file: UploadRawFile
  headers: Headers | Record<string, string | number | null | undefined>
  onError: (evt: UploadAjaxError) => void
  onProgress: (evt: UploadProgressEvent) => void
  onSuccess: (response: any) => void
  withCredentials: boolean
}