2.13.1

Upload 上传 ​

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

基础用法 ​

通过 slot 你可以传入自定义的上传按钮类型和文字提示。 可通过设置 limit 和 on-exceed 来限制上传文件的个数和定义超出限制时的行为。 可通过设置 before-remove 来阻止文件移除操作。

jpg/png files with a size less than 500KB.

覆盖前一个文件 ​

设置 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

    自定义缩略图 ​

    使用 scoped-slot 属性来改变默认的缩略图模板样式。

    图片列表缩略图 ​

    jpg/png files with a size less than 500kb

    上传文件列表控制 ​

    通过 on-change 钩子函数来对上传文件的列表进行控制。

    jpg/png files with a size less than 500kb

    拖拽上传 ​

    你可以将文件拖拽到特定区域以进行上传。

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

      上传目录 2.13.1 ​

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

      启用后，只能选择文件夹；选择文件夹后，文件夹内的文件将被扁平化处理。

      Drop directory here or click to upload

        手动上传 ​

        jpg/png files with a size less than 500kb

          API ​

          属性 ​

          名称描述类型默认值
          action required请求 URLstring#
          headers设置上传的请求头部object—
          method设置上传请求方法stringpost
          multiple是否支持多选文件booleanfalse
          data上传时附带的额外参数 从 v2.3.13 支持 Awaitable 数据，和 Functionobject / Function{}
          name上传的文件字段名stringfile
          with-credentials支持发送 cookie 凭证信息booleanfalse
          show-file-list是否显示已上传文件列表booleantrue
          drag是否启用拖拽上传booleanfalse
          accept接受上传的文件类型（thumbnail-mode 模式下此参数无效）string''
          crossorigin原生属性 crossoriginenum—
          on-preview点击文件列表中已上传的文件时的钩子Function—
          on-remove文件列表移除文件时的钩子Function—
          on-success文件上传成功时的钩子Function—
          on-error文件上传失败时的钩子Function—
          on-progress文件上传时的钩子Function—
          on-change文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用Function—
          on-exceed当超出限制时，执行的钩子函数Function—
          before-upload上传文件之前的钩子，参数为上传的文件， 若返回false或者返回 Promise 且被 reject，则停止上传。Function—
          before-remove删除文件之前的钩子，参数为上传的文件和文件列表， 若返回 false 或者返回 Promise 且被 reject，则停止删除。Function—
          file-list / v-model:file-list默认上传文件array[]
          list-type文件列表的类型enumtext
          auto-upload是否自动上传文件booleantrue
          http-request覆盖默认的 Xhr 行为，允许自行实现上传文件的请求Function请参考ajaxUpload
          disabled是否禁用上传booleanfalse
          limit允许上传文件的最大数量number—
          directory 2.13.1是否支持上传文件夹。 启用后，只能选择文件夹；选择文件夹后，文件夹内的文件将被扁平化处理。booleanfalse

          插槽 ​

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

          外部方法 ​

          名称描述类型
          abort取消上传请求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]>
  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
}

          源代码 ​

          组件 • 样式 • 文档

          贡献者 ​