2
2
3
3
多图片上传组件 ` UploadImgs ` , 附有预览, 排序, 验证等功能 [ 演示效果] ( http://face.cms.7yue.pro/#/imgs-upload/stage1 )
4
4
5
+ - 开箱即用
6
+ - 支持固定上传数量图片上传和不定数量图片上传
7
+ - 支持预览
8
+ - 支持排序
9
+ - 内置图像验证机制
10
+ - 内置支持 Lin-CMS 上传接口
11
+
5
12
## 基础示例
6
13
7
14
``` vue
@@ -37,12 +44,16 @@ export default {
37
44
38
45
新上传的图像会有完整的图像信息
39
46
40
- | 属性 | 类型 | 默认 | 说明 |
41
- | :--------: | :-----: | :--: | :--------: |
42
- | width | Number | null | 图像宽度 |
43
- | height | Number | null | 图像高度 |
44
- | size | Number | null | 文件大小 |
45
- | isAnimated | Boolean | null | 是否是动图 |
47
+ | 属性 | 类型 | 默认 | 说明 |
48
+ | :--------: | :-----------: | :--: | :----------------------------------------: |
49
+ | id | String/Nuber | null | 初始化数据的 id |
50
+ | imgId | String/Number | null | 图像资源 id |
51
+ | src | String | null | 图像相对地址 |
52
+ | display | String | null | 图像完整地址 |
53
+ | width | Number | null | 图像宽度 |
54
+ | height | Number | null | 图像高度 |
55
+ | size | Number | null | 文件大小 |
56
+ | isAnimated | Boolean | null | 是否是动图, 只有开启动图检测, 本值才有意义 |
46
57
47
58
## props
48
59
@@ -58,25 +69,25 @@ export default {
58
69
| before-upload | Function | null | 上传前自定义校验函数, 返回 true 表示校验成功, 否则校验失败不进行后续上传, 支持返回 Promise |
59
70
| remote-fuc | Function | null | 重写远程方法, 支持返回 Promise |
60
71
| sortable | Boolean | false | 是否可排序 |
61
- | accept | String | image/\* | 运行上传的类型 |
62
- | animated-check | Boolean | false | 是否需要检测是否是动图 |
72
+ | accept | String | image/\* | 允许上传的类型, 同 input 的 accept 属性配置 |
73
+ | animated-check | Boolean | false | 是否需要检测是否是动图, 开启后返回数据中 isAnimated 表示是否是动图 |
63
74
| rules | Object | {} | 图像规则 |
64
75
| fit | String | contain | 图像显示形式 |
65
- | width | Nulber/String | 200 | 宽度 |
66
- | height | Number/String | 200 | 高度 |
76
+ | width | Nulber/String | 200 | 组件每项的宽度 |
77
+ | height | Number/String | 200 | 组件每项的高度 |
67
78
68
79
图像验证规则属性 rule 支持的验证规则有:
69
80
70
- | 属性 | 类型 | 默认 | 说明 |
71
- | :-----------: | :----- : | :--: | :-------------: |
72
- | ratio | Array | null | 比例 [ 宽,高] |
73
- | width | Number | null | 宽度必需等于 |
74
- | height | Number | null | 高度必需等于 |
75
- | minWidth | Number | null | 最小宽 |
76
- | minHeight | Number | null | 最小高 |
77
- | minSize | Number | null | 最小 size(Mb) |
78
- | maxSize | Number | null | 最大 size(Mb) |
79
- | allowAnimated | Boolean | true | 最大 size(Mb) |
81
+ | 属性 | 类型 | 默认 | 说明 |
82
+ | :-----------: | :----: | :--: | :-------------------------------------------------------------------------------------- -------------: |
83
+ | ratio | Array | null | 比例 [ 宽,高] |
84
+ | width | Number | null | 宽度必需等于 |
85
+ | height | Number | null | 高度必需等于 |
86
+ | minWidth | Number | null | 最小宽 |
87
+ | minHeight | Number | null | 最小高 |
88
+ | minSize | Number | null | 最小 size(Mb) |
89
+ | maxSize | Number | null | 最大 size(Mb) |
90
+ | allowAnimated | Number | null | 是否允许上传动图, 0 不检测, 1 不允许动图, 2 只允许动图. 要检查此项, 需设置属性 animated-check 为 true |
80
91
81
92
默认值为 ` { maxSize: 2 } ` 图片文件大小限制 2M 内. 这与 lin-cms 服务端文件上传接口默认限制一致
82
93
@@ -86,3 +97,4 @@ export default {
86
97
| :------: | :--: | :------------------------------------------: |
87
98
| getValue | 无 | 获取当前组件的值, 如果验证不通过则返回 false |
88
99
| clear | 无 | 清空当前所选图片 |
100
+ | reset | 无 | 重置图片, 回到初始化数据状态(value) |
0 commit comments