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

      手动上传 ​

      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默认上传文件object[]
        list-type文件列表的类型enumtext
        auto-upload是否自动上传文件booleantrue
        http-request覆盖默认的 Xhr 行为，允许自行实现上传文件的请求Function请参考ajaxUpload
        disabled是否禁用上传booleanfalse
        limit允许上传文件的最大数量number—

        插槽 ​

        名称描述类型
        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
}

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

        源代码 ​

        组件 • 样式 • 文档

        贡献者 ​