单文件上传
这是传统的通过input方式上传
单图片上传,带缩略图
这是异步方式上传,与上面的示例使用区别在于不用写input,但必须要指定name和url值,具体请看文档说明。
单图片上传,也可以提前放置缩略图
添加图片
单文件上传,点击或拖拽上传
多图片上传
自带缩略图展示,可自定义上传图片的格式
多图片上传-回显图片
添加图片
自带缩略图展示,可自定义上传图片的格式
多附件上传
自带存储大小,可自定义上传附件的格式
单文件上传
这是原生最普通的一种input方式,以同步的方式提交,只不过被美化了,如果想要使用异步,把input标签删掉就行了,但必须要指定data-name和data-url的值,具体请看下面的data属性值设置列表与代码示例。
单文件上传,开启缩略图
如果想要开启缩略图的话,只需要添加一个data-img="true"属性即可
单图片上传,预放置缩略图
单文件上传,点击或拖拽上传
多图片上传
该方式采用异步上传,必须指定上传的url连接
多图片上传-图片回显
编辑资料中往往会用到回显,也就是上传了什么图片,显示在列表中
多附件上传
该方式采用异步上传,必须指定上传的url连接
异步上传的data属性值设置列表
注意:异步上传,必须设置data-name与data-url
参数设置:
参数 |
类型 |
默认 |
必填 |
描述 |
data-name |
String |
- |
是 |
对应input的name |
data-url |
String |
- |
是 |
文件上传的地址 |
data-accept |
String |
- |
否 |
对应input的accept,接受的文件类型 |
data-count |
Int |
- |
否 |
上传的图片或文件的数量,默认不限制 |
data-del |
Function |
- |
否 |
【单文件上传没有该设置】删除某项执行该方法 |
data-success |
Function |
- |
否 |
上传成功执行该方法 |
data-error |
Function |
- |
否 |
上传失败执行该方法 |
data-complete |
Function |
- |
否 |
无论上传成功还是失败,都会执行该方法 |
图片或文件上传成功后的返回值
//表单成功后需要返回json格式字符串,不能包含其它多余的信息,字段如下:
//url {string} 文件的地址
//name {string} 文件的名称(包含后缀)
//error {int|string} 上传成功为0,其它为错误信息,将以弹窗形式提醒用户
//上传成功的示例
{
url: "/upload/img/153444.jpg",
name: "153444.jpg",
error: 0,
message: "上传成功"
}
//上传失败的示例
{
url: "/upload/img/153444.jpg",
name: "153444.jpg",
error: 1,
error: "禁止该文件类型上传"
}