组件

Upload 上传

可以通过点击选择、拖拽、手动上传文件 API文档 组件问题反馈和讨论

使用方法

  • 上传文件的大小不易过大。

基础样式 #

最基础的上传文件的方式 nv-upload ,点击按钮出现选择文件选择框
<code>
显示代码

文字说明样式 #

对上传文件的大小、格式等有相应的文字说明,可添加样式 nv-upload-explain
<code>
显示代码

已上传文件列表 #

已上传列表样式为 nv-upload-list ,有默认状态、上传失败 nv-upload-error、上传中 nv-upload-doing 三种状态。
<code>
  • Accessory1.png
  • Accessory2.png
  • Accessory3.png 10%
显示代码

头像上传 #

点击上传用户头像,并且要能够限制用户上传的图片格式和大小,需添加样式 nv-upload-avatar
<code>
显示代码

多图片上传 #

用户可以上传多张图片,需要限制上传数量,到达上传上限,上传按钮消失,本示例中最多上传3张图片。多图片上传样式 nv-upload-picture ,图片列表样式 nv-upload-list-picture
<code>
显示代码

图片列表 #

已上传图片列表样式 nv-upload-list-photo ,有两种排列方式:默认 、垂直 nv-upload-list-vertical
<code>
  • photo1.jpg
  • photo1.jpg
  • photo1.jpg
  • photo1.jpg
显示代码

拖拽上传 #

把文件拖拽至指定区域即可完成上传,同样支持点击上传,拖拽上传需添加样式 nv-upload-drag
<code>
  • Accessory1.png
显示代码

手动上传 #

手动上传需添加样式 nv-upload-manual ,默认状态下,Upload按钮为灰色不可点击状态,当选择文件后,Upload按钮成激活状态,Upload按钮触发上传文件操作,手动上传文件。
<code>
  • Accessory1.png
显示代码
API
属性
描述
类型
默认值
title
上传按钮的名称
String
Click to Upload(基础上传)、Select File(手动上传)
alt
上传要求描述文字
String
The file size is no more than 500kb and the file format is JPG/PNG