Upload 上传

上传是将信息（网页、文字、图片、视频等）通过网页或者上传工具发布到远程服务器上的过程。

何时使用

当需要上传一个或一些文件时。支持自定义检查，三种状态模版，暴露成功失败事件

演示

点击上传

template代码

 <uploader
      action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
      :beforeUpload="commonUploadCheck"
      class="d-flex align-items-center justify-content-center bg-light text-secondary w-100 my-4 p-4"
    >
    </uploader>    

setup代码

export const commonUploadCheck = (file: File) => {
  const result = beforeUploadCheck(file, { format: ['image/jpeg', 'image/png'], size: 1 })
  const { passed, error } = result
  if (error === 'format') {
    createMessage('上传图片只能是 JPG/PNG 格式!', 'error')
  }
  if (error === 'size') {
    createMessage('上传图片大小不能超过 1Mb', 'error')
  }
  return passed
}       

Upload 属性和事件

属性或事件	类型	默认	说明
action	string	-	上传的后端 URL
beforeUpload	function	-	(file: File) => boolean
uploaded	object	-	上传完成后回传的数据，可以供自定义模版使用
file-uploaded	事件	-	回调函数 (data: any) => void, 成功上传以后发送的事件
file-uploaded-error	事件	-	回调函数 (error: Error) => void, 上传失败以后发送的事件