Upload 上传

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

点击上传

  • food.jpg

只能上传jpg/png文件,且不超过500kb

显示代码

照片墙

使用 list-type 属性来设置文件列表的样式。

只能上传jpg/png文件,且不超过500kb

显示代码

拖拽上传

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

application/pdf,application/doc,application/docx 只能上传jpg/png文件,且不超过2MB

    显示代码

    Attributes

    参数 说明 类型 可选值 默认值
    action 必选参数,上传的地址 string — —
    headers 设置上传的请求头部 object — —
    multiple 是否支持多选文件 boolean — true
    data 上传时附带的额外参数 object — —
    name 上传的文件字段名 string — file
    withCredentials 支持发送 cookie 凭证信息 boolean — false
    showFileList 是否显示已上传文件列表 boolean — true
    drag 是否启用拖拽上传 boolean — false
    accept 接受上传的文件类型(thumbnail-mode 模式下此参数无效) string — —
    onPreview 点击文件列表中已上传的文件时的钩子 function(file) — —
    onRemove 文件列表移除文件时的钩子 function(file, fileList) — —
    onSuccess 文件上传成功时的钩子 function(response, file, fileList) — —
    onError 文件上传失败时的钩子 function(err, file, fileList) — —
    onProgress 文件上传时的钩子 function(event, file, fileList) — —
    onChange 文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用 function(file, fileList) — —
    beforeUpload 上传文件之前的钩子,参数为上传的文件,若返回 false 或者返回 Promise 且被 reject,则停止上传。 function(file) — —
    beforeRemove 删除文件之前的钩子,参数为上传的文件和文件列表,若返回 false 或者返回 Promise 且被 reject,则停止删除。 function(file, fileList) — —
    listType 文件列表的类型 string text/picture/picture-card text
    autoUpload 是否在选取文件后立即进行上传 boolean — true
    fileList 上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}] array — []
    httpRequest 覆盖默认的上传行为,可以自定义上传的实现 function — —
    disabled 是否禁用 boolean — false
    limit 最大允许上传个数 number — —
    onExceed 文件超出个数限制时的钩子 function(files, fileList) — -

    Events

    事件名称 说明 回调参数
    clearFiles 清空已上传的文件列表(该方法不支持在 beforeUpload 中调用) —
    abort 取消上传请求 ( file: fileList 中的 file 对象 )
    submit 手动上传文件列表 —

    Slot

    name 说明
    tip 提示