Skip to content

Commit e8571ea

Browse files
quanquan2100quanquan2100
authored
图像上传组件更新 (TaleLin#209)
图像上传组件更新
2 parents 2c8962a + 86c319c commit e8571ea

File tree

3 files changed

+168
-116
lines changed

3 files changed

+168
-116
lines changed

‎src/components/base/upload-imgs/README.md‎

Lines changed: 63 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,13 @@
22

33
多图片上传组件 `UploadImgs`, 附有预览, 排序, 验证等功能 [演示效果](http://face.cms.7yue.pro/#/imgs-upload/stage1)
44

5+
- 开箱即用
6+
- 支持固定上传数量图片上传和不定数量图片上传
7+
- 支持预览
8+
- 支持排序
9+
- 内置图像验证机制
10+
- 内置支持 Lin-CMS 上传接口
11+
512
## 基础示例
613

714
```vue
@@ -33,16 +40,51 @@ export default {
3340
</script>
3441
```
3542

43+
### 初始化说明
44+
45+
初始化时传入数组, 如果初始化为空则传入空数组 `[]`, 如果已经存在内容, 内容结构要求如下:
46+
47+
| 属性 | 类型 | 是否必填 | 说明 |
48+
| :-----: | :-----------: | :------: | :---------------------------: |
49+
| id | String/Nuber | 否 | 初始化数据的 id, 推荐有该数据 |
50+
| imgId | String/Number | 否 | 图像资源 id |
51+
| src | String | 否 | 图像相对地址 |
52+
| display | String | 是 | 图像完整地址, 用于展示 |
53+
54+
示例:
55+
56+
```js
57+
const initData = [{
58+
id: '12d3',
59+
display: 'http://img-home.7yue.pro/images/index/Lin_cms_%E5%B0%81%E9%9D%A2.png',
60+
src: '/images/index/Lin_cms_%E5%B0%81%E9%9D%A2.png',
61+
imgId: '238287',
62+
}, {
63+
id: '17qr',
64+
display: 'http://img-home.7yue.pro/images/index/Lin_UI_%E5%B0%81%E9%9D%A2.png',
65+
src: '/images/index/Lin_UI_%E5%B0%81%E9%9D%A2.png',
66+
imgId: '1232323',
67+
}];
68+
```
69+
3670
### 返回值说明
3771

3872
新上传的图像会有完整的图像信息
3973

40-
| 属性 | 类型 | 默认 | 说明 |
41-
| :--------: | :-----: | :--: | :--------: |
42-
| width | Number | null | 图像宽度 |
43-
| height | Number | null | 图像高度 |
44-
| size | Number | null | 文件大小 |
45-
| isAnimated | Boolean | null | 是否是动图 |
74+
| 属性 | 类型 | 默认 | 说明 |
75+
| :--------: | :-----------: | :--: | :---------------------------------------------------: |
76+
| id | String/Nuber | null | 初始化数据的 id |
77+
| imgId | String/Number | null | 图像资源 id |
78+
| src | String | null | 图像相对地址 |
79+
| display | String | null | 图像完整地址 |
80+
| width | Number | null | 图像宽度 |
81+
| height | Number | null | 图像高度 |
82+
| fileName | String | null | 文件名 |
83+
| fileSize | Numbr | null | 文件大小 |
84+
| fileType | String | null | 文件的媒体类型 (MIME), 针对部分文件类型做了检测 |
85+
| isAnimated | Boolean | null | 是否是动图, 只有开启动图检测, 本值才有效, 否则为 null |
86+
87+
**注意:** 以上字段只针对新上传的图片, 初始化的图片如果没有传入字段, 则值为空
4688

4789
## props
4890

@@ -58,25 +100,25 @@ export default {
58100
| before-upload | Function | null | 上传前自定义校验函数, 返回 true 表示校验成功, 否则校验失败不进行后续上传, 支持返回 Promise |
59101
| remote-fuc | Function | null | 重写远程方法, 支持返回 Promise |
60102
| sortable | Boolean | false | 是否可排序 |
61-
| accept | String | image/\* | 运行上传的类型 |
62-
| animated-check | Boolean | false | 是否需要检测是否是动图 |
103+
| accept | String | image/\* | 允许上传的类型, 同 input 的 accept 属性配置 |
104+
| animated-check | Boolean | false | 是否需要检测是否是动图, 开启后返回数据中 isAnimated 表示是否是动图 |
63105
| rules | Object | {} | 图像规则 |
64106
| fit | String | contain | 图像显示形式 |
65-
| width | Nulber/String | 200 | 宽度 |
66-
| height | Number/String | 200 | 高度 |
107+
| width | Nulber/String | 200 | 组件每项的宽度 |
108+
| height | Number/String | 200 | 组件每项的高度 |
67109

68110
图像验证规则属性 rule 支持的验证规则有:
69111

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） |
112+
| 属性 | 类型 | 默认 | 说明 |
113+
| :-----------: | :----------: | :--: | :---------------------------------------------------------------------------------------------------: |
114+
| ratio | Array/Number | null | 比例 [宽，高], 或者 宽/高 的数值 |
115+
| width | Number | null | 宽度必需等于 |
116+
| height | Number | null | 高度必需等于 |
117+
| minWidth | Number | null | 最小宽 |
118+
| minHeight | Number | null | 最小高 |
119+
| minSize | Number | null | 最小 size（Mb） |
120+
| maxSize | Number | null | 最大 size（Mb） |
121+
| allowAnimated | Number | null | 是否允许上传动图, 0 不检测, 1 不允许动图, 2 只允许动图. 要检查此项, 需设置属性 animated-check 为 true |
80122

81123
默认值为 `{ maxSize: 2 }` 图片文件大小限制 2M 内. 这与 lin-cms 服务端文件上传接口默认限制一致
82124

@@ -86,3 +128,4 @@ export default {
86128
| :------: | :--: | :------------------------------------------: |
87129
| getValue | 无 | 获取当前组件的值, 如果验证不通过则返回 false |
88130
| clear | 无 | 清空当前所选图片 |
131+
| reset | 无 | 重置图片, 回到初始化数据状态(value) |

0 commit comments

Comments
 (0)