Upload 上传

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

点击上传

通过设置 action 属性指定上传接口地址。

<template>
  <ZcUpload action="https://example.com/upload" :limit="3">
    <ZcButton type="primary">点击上传</ZcButton>
    <template #tip>
      <div style="color: #909399; font-size: 12px; margin-top: 8px;">
        只能上传 jpg/png 文件，且不超过 2MB
      </div>
    </template>
  </ZcUpload>
</template>

拖拽上传

设置 drag 属性可开启拖拽上传。

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

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

<template>
  <ZcUpload action="https://example.com/upload" drag multiple>
    <template #tip>
      <div style="color: #909399; font-size: 12px;">
        将文件拖到此处，或 <em style="color: #409eff; cursor: pointer;">点击上传</em>
      </div>
    </template>
  </ZcUpload>
</template>

照片墙

设置 list-type 为 picture-card 可展示照片墙模式。

<template>
  <ZcUpload action="https://example.com/upload" list-type="picture-card" :limit="4" />
</template>

Upload API

Props

参数	说明	类型	默认值
modelValue	文件列表 (v-model)	UploadFile[]	[]
action	上传的地址	string	'#'
multiple	是否支持多选文件	boolean	false
accept	接受上传的文件类型	string	''
disabled	是否禁用	boolean	false
limit	最大允许上传个数	number	0
autoUpload	是否在选取文件后立即进行上传	boolean	true
withCredentials	上传请求是否携带 cookie	boolean	false
headers	上传请求的额外 headers	object	{}
data	上传请求的额外参数	object	{}
name	上传的文件字段名	string	'file'
drag	是否启用拖拽上传	boolean	false
listType	文件列表的类型	'text' | 'picture' | 'picture-card'	'text'
showFileList	是否显示已上传文件列表	boolean	true
httpRequest	覆盖默认上传行为	Function	undefined
beforeUpload	上传文件之前的钩子	(file: File) => boolean | Promise<boolean>	undefined
onRemove	文件移除时的钩子	(file: UploadFile) => boolean | Promise<boolean>	undefined

Events

事件名	说明	回调参数
change	文件状态改变时触发	(file: UploadFile, fileList: UploadFile[])
success	文件上传成功时触发	(response, file, fileList)
error	文件上传失败时触发	(error, file, fileList)
progress	文件上传时触发	(event: { percent: number }, file: UploadFile)
remove	文件列表移除文件时触发	(file: UploadFile, fileList: UploadFile[])
exceed	文件超出个数限制时触发	(files: File[], fileList: UploadFile[])

Slots

插槽名	说明
default	上传区域内容
file	自定义文件项内容
tip	提示说明文字