# 多图上传
多图片上传组件 `UploadImgs`, 附有预览, 排序, 验证等功能 [演示效果](http://face.cms.7yue.pro/#/imgs-upload/stage1)
- 开箱即用
- 支持固定上传数量图片上传和不定数量图片上传
- 支持预览
- 支持排序
- 内置图像验证机制
- 内置支持 Lin-CMS 上传接口
## 基础示例
```vue
<upload-imgs ref="uploadEle" :value="initData" />
<script>
import UploadImgs from "@/components/base/upload-imgs";
export default {
components: {
UploadImgs
},
data() {
return {
rules: {
minWidth: 100,
minHeight: 100,
maxSize: 5
},
initData: []
};
},
methods: {
getValue() {
this.$refs.uploadEle.getValue();
}
}
};
</script>
```
### 初始化说明
初始化时传入数组, 如果初始化为空则传入空数组 `[]`, 如果已经存在内容, 内容结构要求如下:
| 属性 | 类型 | 是否必填 | 说明 |
| :-----: | :-----------: | :------: | :---------------------------: |
| id | String/Nuber | 否 | 初始化数据的 id, 推荐有该数据 |
| imgId | String/Number | 否 | 图像资源 id |
| src | String | 否 | 图像相对地址 |
| display | String | 是 | 图像完整地址, 用于展示 |
示例:
```js
const initData = [{
id: '12d3',
display: 'http://img-home.7yue.pro/images/index/Lin_cms_%E5%B0%81%E9%9D%A2.png',
src: '/images/index/Lin_cms_%E5%B0%81%E9%9D%A2.png',
imgId: '238287',
}, {
id: '17qr',
display: 'http://img-home.7yue.pro/images/index/Lin_UI_%E5%B0%81%E9%9D%A2.png',
src: '/images/index/Lin_UI_%E5%B0%81%E9%9D%A2.png',
imgId: '1232323',
}];
```
### 返回值说明
新上传的图像会有完整的图像信息
| 属性 | 类型 | 默认 | 说明 |
| :--------: | :-----------: | :--: | :---------------------------------------------------: |
| id | String/Nuber | null | 初始化数据的 id |
| imgId | String/Number | null | 图像资源 id |
| src | String | null | 图像相对地址 |
| display | String | null | 图像完整地址 |
| width | Number | null | 图像宽度 |
| height | Number | null | 图像高度 |
| fileName | String | null | 文件名 |
| fileSize | Numbr | null | 文件大小 |
| fileType | String | null | 文件的媒体类型 (MIME), 针对部分文件类型做了检测 |
| isAnimated | Boolean | null | 是否是动图, 只有开启动图检测, 本值才有效, 否则为 null |
**注意:** 以上字段只针对新上传的图片, 初始化的图片如果没有传入字段, 则值为空
## props
| 参数 | 类型 | 默认值 | 说明 |
| :------------: | :-----------: | :------: | :----------------------------------------------------------------------------------------: |
| value | Array | [] | 初始化数据 |
| auto-upload | Boolean | true | 新增图片是是否自动上传 |
| disabled | Boolean | false | 是否禁用 |
| preview | Boolean | true | 是否可预览 |
| multiple | Boolean | false | 是否可以一次多选 |
| min-num | Number | 0 | 最少图片数量 |
| max-num | Number | 0 | 最多图片数量, 0 表示无限制 |
| before-upload | Function | null | 上传前自定义校验函数, 返回 true 表示校验成功, 否则校验失败不进行后续上传, 支持返回 Promise |
| remote-fuc | Function | null | 重写远程方法, 支持返回 Promise |
| sortable | Boolean | false | 是否可排序 |
| accept | String | image/\* | 允许上传的类型, 同 input 的 accept 属性配置 |
| animated-check | Boolean | false | 是否需要检测是否是动图, 开启后返回数据中 isAnimated 表示是否是动图 |
| rules | Object | {} | 图像规则 |
| fit | String | contain | 图像显示形式 |
| width | Nulber/String | 200 | 组件每项的宽度 |
| height | Number/String | 200 | 组件每项的高度 |
图像验证规则属性 rule 支持的验证规则有:
| 属性 | 类型 | 默认 | 说明 |
| :-----------: | :----------: | :--: | :---------------------------------------------------------------------------------------------------: |
| ratio | Array/Number | null | 比例 [宽,高], 或者 宽/高 的数值 |
| width | Number | null | 宽度必需等于 |
| height | Number | null | 高度必需等于 |
| minWidth | Number | null | 最小宽 |
| minHeight | Number | null | 最小高 |
| minSize | Number | null | 最小 size(Mb) |
| maxSize | Number | null | 最大 size(Mb) |
| allowAnimated | Number | null | 是否允许上传动图, 0 不检测, 1 不允许动图, 2 只允许动图. 要检查此项, 需设置属性 animated-check 为 true |
默认值为 `{ maxSize: 2 }` 图片文件大小限制 2M 内. 这与 lin-cms 服务端文件上传接口默认限制一致
## methods
| 方法名 | 参数 | 说明 |
| :------: | :--: | :------------------------------------------: |
| getValue | 无 | 获取当前组件的值, 如果验证不通过则返回 false |
| clear | 无 | 清空当前所选图片 |
| reset | 无 | 重置图片, 回到初始化数据状态(value) |
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
毕设&课设&项目&实训-基于Vue和Koa,前后端分离的独立游戏门户网站,包含了CMS系统,实现评论,文章,视音频媒体播放等功能。 . 【项目资源】: 包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。 包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python、web、C#、EDA、proteus、RTOS等项目的源码。 【项目质量】: 所有源码都经过严格测试,可以直接运行。 功能在确认正常工作后才上传。 【适用人群】: 适用于希望学习不同技术领域的小白或进阶学习者。 可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】: 项目具有较高的学习借鉴价值,也可直接拿来修改复刻。 对于有一定基础或热衷于研究的人来说,可以在这些基础代码上进行修改和扩展,实现其他功能。 【沟通交流】: 有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。 鼓励下载和使用,并欢迎大家互相学习,共同进步。
资源推荐
资源详情
资源评论
收起资源包目录
毕设&课设&项目&实训-基于Vue和Koa,前后端分离的独立游戏门户网站 .zip (659个子文件)
.babelrc 445B
default.conf.bak 1KB
nginx.conf.bak 736B
default.conf 2KB
nginx.conf 1KB
app.dc547be277b16691710862e2212c8799.css 389KB
chunk-vendors.610cf110.css 295KB
app.3b960f11.css 279KB
chunk-74a19a89.822078de.css 222KB
skin.css 46KB
skin.css 46KB
skin.css 46KB
skin.css 46KB
skin.min.css 39KB
skin.min.css 39KB
skin.min.css 39KB
skin.min.css 39KB
skin.mobile.min.css 27KB
skin.mobile.min.css 27KB
iconfont.css 19KB
iconfont.css 19KB
content.inline.css 18KB
content.inline.css 18KB
content.inline.css 18KB
content.inline.css 18KB
content.css 18KB
content.css 18KB
content.css 18KB
content.css 18KB
content.inline.min.css 16KB
content.inline.min.css 16KB
content.inline.min.css 16KB
content.inline.min.css 16KB
content.min.css 16KB
content.min.css 16KB
content.min.css 16KB
content.min.css 16KB
demo.css 8KB
chunk-1893b551.6e267ebe.css 7KB
chunk-66243e56.f24377c1.css 5KB
chunk-f17a921c.7552f08e.css 5KB
chunk-90387b66.c600460b.css 5KB
iconfont.css 5KB
chunk-8f43ff58.aad7f1e6.css 4KB
chunk-3759f258.737e8584.css 4KB
chunk-1f3eef2e.a8d280fb.css 4KB
chunk-5409405a.157b1dcb.css 4KB
chunk-bd722650.25715408.css 3KB
chunk-8232abdc.c0284b2b.css 3KB
chunk-5365eb30.823ede53.css 3KB
chunk-0189a0ea.3c052b92.css 2KB
chunk-44c1c07d.544a6fbe.css 2KB
chunk-4e9065f4.183760fb.css 2KB
chunk-74bc5b1d.f1743d57.css 2KB
chunk-625bb77c.5c0bde1a.css 2KB
chunk-32329c19.db99d60d.css 1KB
chunk-e2f9aa78.71c23568.css 1KB
chunk-7bc15a2c.ad029001.css 1KB
chunk-2cbd9d15.21d6cfcd.css 1KB
content.css 1KB
content.css 1KB
content.css 968B
content.css 968B
content.css 943B
content.css 943B
content.min.css 938B
content.min.css 938B
chunk-40dc7acc.1f30bb7d.css 934B
chunk-01690f55.3c33ac5f.css 912B
chunk-89de4c1c.610a500f.css 899B
content.min.css 884B
content.min.css 884B
content.min.css 863B
content.min.css 863B
chunk-02830d84.e060d6b0.css 784B
chunk-d016812e.c486a33f.css 698B
chunk-86ce195c.ae1481a7.css 647B
chunk-f2e52c62.e459b476.css 567B
chunk-5e0b9ecd.9aec2d43.css 495B
chunk-0f9a4bb2.77f6924d.css 493B
chunk-87e9ed72.1e957593.css 410B
chunk-6710d552.db63937f.css 410B
chunk-8b5c0e9a.2c2bc08f.css 399B
chunk-80baaf16.7575900f.css 351B
chunk-7019489e.4f542c2f.css 351B
chunk-196b955e.5e08c493.css 295B
chunk-770ab343.22f3a106.css 261B
content.mobile.min.css 234B
content.mobile.min.css 234B
chunk-0dcb2a69.71579b67.css 207B
chunk-76f0d0a6.249a6657.css 129B
chunk-def62882.b182f18a.css 124B
chunk-d8bac8ae.88fcf2dc.css 92B
font.css 69B
chunk-b357636e.5a6192ae.css 59B
chunk-76f252f0.77ea84f2.css 0B
chunk-748c6bd6.7cc20474.css 0B
chunk-773732cb.7cc20474.css 0B
.env.development 76B
系统安装部署手册.docx 33KB
共 659 条
- 1
- 2
- 3
- 4
- 5
- 6
- 7
资源评论
妄北y
- 粉丝: 1w+
- 资源: 1万+
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 基于虚拟仿真环境下的自动驾驶交通标志识别python源码+文档说明+截图演示+数据集+使用教学(98分高分毕业设计)
- python实现的基于CNN深度学习网络的交通标志识别+源代码+文档说明+安装教程+使用教程(高分毕业设计)
- 基于Spring Bootd实现的图像去雾系统端,完成主要的前后端交互+源代码+文档说明
- 企业网站建设-PPT.ppt
- 办公自动化Microsoft-Office学习教程.doc
- 办公软件ECEL技巧培训课件-PPT.pptx
- 办公软件Word快捷键大全.doc
- Springboot集成SpringbootAdmin实现服务监控管理-源码
- 办公软件应用-计算机一级考试试题.doc
- 毕业设计-图像去雾,基于matlab实现的暗通道先验算法和Retinex图像增强算法制作的图形化界面程序仿真源码
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功