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 提示