# 多图上传
多图片上传组件 `UploadImgs`, 附有预览, 排序, 验证等功能 [演示效果](http://face.cms.7yue.pro/#/imgs-upload/stage1)
- 开箱即用
- 支持固定上传数量图片上传和不定数量图片上传
- 支持预览
- 支持排序
- 内置图像验证机制
- 内置支持 Lin-CMS 上传接口
## 基础示例
```vue
<upload-imgs ref="uploadEle" :value="initData" />
<script>
import UploadImgs from "@/component/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) |
没有合适的资源?快使用搜索试试~ 我知道了~
java课程设计-校企招聘管理系统源码+数据库.zip
共564个文件
java:208个
vue:121个
js:93个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 106 浏览量
2022-12-06
14:58:37
上传
评论 2
收藏 3.55MB ZIP 举报
温馨提示
java课程设计-校企招聘管理系统源码+数据库.zip java课程设计-校企招聘管理系统源码+数据库.zip java课程设计-校企招聘管理系统源码+数据库.zip java课程设计-校企招聘管理系统源码+数据库.zip java课程设计-校企招聘管理系统源码+数据库.zip java课程设计-校企招聘管理系统源码+数据库.zip java课程设计-校企招聘管理系统源码+数据库.zip java课程设计-校企招聘管理系统源码+数据库.zip java课程设计-校企招聘管理系统源码+数据库.zip java课程设计-校企招聘管理系统源码+数据库.zip java课程设计-校企招聘管理系统源码+数据库.zip java课程设计-校企招聘管理系统源码+数据库.zip java课程设计-校企招聘管理系统源码+数据库.zip java课程设计-校企招聘管理系统源码+数据库.zip java课程设计-校企招聘管理系统源码+数据库.zip java课程设计-校企招聘管理系统源码+数据库.zip java课程设计-校企招聘管理系统源码+数据库.zip java课程设计-校企招聘管理系统源码+数据库.
资源推荐
资源详情
资源评论
收起资源包目录
java课程设计-校企招聘管理系统源码+数据库.zip (564个子文件)
skin.css 46KB
skin.css 46KB
skin.min.css 39KB
skin.min.css 39KB
skin.mobile.min.css 27KB
iconfont.css 19KB
content.inline.css 18KB
content.inline.css 18KB
content.css 18KB
content.css 18KB
content.inline.min.css 16KB
content.inline.min.css 16KB
content.min.css 16KB
content.min.css 16KB
content.css 1KB
content.css 968B
content.css 943B
content.min.css 938B
content.min.css 884B
content.min.css 863B
iconfont.css 471B
content.mobile.min.css 234B
.env.development 112B
.editorconfig 216B
stage1.vue.ejs 1KB
component.vue.ejs 875B
stage2.vue.ejs 803B
stage-config.js.ejs 781B
README.md.ejs 668B
plugin-stage-config.js.ejs 309B
package.json.ejs 236B
.eslintignore 93B
subject.ftl 608B
observer.ftl 503B
.gitignore 500B
.gitignore 373B
index.html 2KB
favicon.ico 4KB
UserServiceImpl.java 12KB
WebSocket.java 12KB
PositionController.java 11KB
RestExceptionHandler.java 11KB
AdminServiceImpl.java 9KB
AdminController.java 7KB
ResumeController.java 7KB
ApplicationController.java 7KB
CompanyController.java 6KB
AuthorizeVerifyResolverImpl.java 6KB
AbstractUploader.java 6KB
UserController.java 6KB
ResumeServiceImpl.java 5KB
GroupServiceImpl.java 5KB
FollowController.java 5KB
CategoryController.java 5KB
WsHandlerImpl.java 5KB
MDCAccessServletFilter.java 4KB
InterviewController.java 4KB
LogController.java 4KB
PermissionServiceImpl.java 4KB
WebSocketInterceptor.java 4KB
UserService.java 3KB
PositionServiceImpl.java 3KB
WebConfiguration.java 3KB
UserIdentityServiceImpl.java 3KB
ResponseUtil.java 3KB
AdminService.java 3KB
WsHandler.java 3KB
FavorController.java 3KB
LoggerImpl.java 3KB
FileServiceImpl.java 3KB
CommonConfiguration.java 3KB
GroupService.java 3KB
QiniuUploader.java 3KB
LogServiceImpl.java 3KB
PermissionHandleListener.java 2KB
CompanyServiceImpl.java 2KB
LocalUploader.java 2KB
HrCompanyServiceImpl.java 2KB
UserIdentityService.java 2KB
MailServiceImpl.java 2KB
ApplicationServiceImpl.java 2KB
SubjectGenerate.java 2KB
FileProperties.java 2KB
FollowServiceImpl.java 2KB
FileUtil.java 2KB
ChatServiceImpl.java 2KB
RedisServiceImpl.java 2KB
ObserverGenerate.java 2KB
LogService.java 2KB
WebsocketConfiguration.java 2KB
RecruitApplication.java 2KB
NotifyServiceImpl.java 2KB
NotifyController.java 2KB
Page.java 2KB
UnifyResponseVO.java 2KB
CategoryServiceImpl.java 2KB
PermissionService.java 2KB
ResultAspect.java 1KB
InterviewServiceImpl.java 1KB
HrCompanyController.java 1KB
共 564 条
- 1
- 2
- 3
- 4
- 5
- 6
资源评论
程序员张小妍
- 粉丝: 1w+
- 资源: 2645
下载权益
C知道特权
VIP文章
课程特权
开通VIP
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功