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
属性
|
描述
|
类型
|
默认值
|
---|
title
|
上传按钮的名称
|
String
|
Click to Upload(基础上传)、Select File(手动上传)
|
alt
|
上传要求描述文字
|
String
|
The file size is no more than 500kb and the file format is JPG/PNG
|