# 多图上传
多图片上传组件 `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) |
没有合适的资源?快使用搜索试试~ 我知道了~
微信小程序商城 配套的CMS管理后台.zip
共208个文件
js:72个
vue:50个
png:25个
需积分: 1 0 下载量 46 浏览量
2024-01-09
23:02:05
上传
评论
收藏 1.49MB ZIP 举报
温馨提示
小程序,轻量级设计,无需下载安装,即开即用,释放手机内存压力,轻松应对日常各种需求。无论是购物支付、信息查询,还是休闲娱乐、生活服务,我们都一应俱全,满足您的多元化需求。
资源推荐
资源详情
资源评论
收起资源包目录
微信小程序商城 配套的CMS管理后台.zip (208个子文件)
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
content.mobile.min.css 234B
.env.development 42B
Stage1.vue.ejs 1KB
Component.vue.ejs 873B
stage-config.js.ejs 830B
Stage2.vue.ejs 804B
README.md.ejs 686B
plugin-stage-config.js.ejs 292B
package.json.ejs 244B
.eslintignore 87B
.gitignore 230B
.gitkeep 0B
.gitkeep 0B
index.html 2KB
favicon.ico 4KB
open-source.jpg 177KB
qrcode.jpg 27KB
user.jpg 9KB
zh_CN.js 12KB
axios.js 7KB
util.js 6KB
getters.js 5KB
plugin-new.js 5KB
utils.js 5KB
log.js 3KB
admin.js 3KB
index.js 3KB
plugin-init.js 3KB
install-dep.js 2KB
index.js 2KB
index.js 2KB
ripple.js 2KB
goods.js 2KB
sse.js 2KB
LIcon.test.js 2KB
user.js 2KB
search.js 1KB
.eslintrc.js 1KB
index.js 1KB
plugin-get-all.js 1KB
order.js 1KB
mutations.js 1KB
main.js 1KB
admin.js 1KB
authorize.js 1KB
index.js 1KB
book.js 992B
oss.js 973B
vue.config.js 971B
home-router.js 947B
notify.js 937B
order.js 915B
goods.js 914B
spec.js 870B
cookie.js 861B
plugin-get-config.js 755B
semver-validate.js 740B
admin.js 737B
shop.js 735B
token.js 730B
category.js 670B
jest.config.js 663B
auto-jump.js 657B
coupon.js 622B
index.js 619B
sku.js 586B
grid_category.js 574B
banner.js 557B
actions.js 535B
state.js 530B
market.js 527B
index.js 477B
mutation-types.js 403B
date.js 397B
routes.js 387B
error-code.js 358B
storage.js 308B
index.js 301B
.prettierrc.js 296B
babel.config.js 291B
共 208 条
- 1
- 2
- 3
资源评论
极致人生-010
- 粉丝: 3342
- 资源: 3076
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功