# Uploader
图片上传控件
# Uploader 引入
TIP
import Uploader from "jimoui/components/Uploader/V1/Uploader";
1
# 代码演示
TIP
<Uploader
v-model="imgList"
@onUpload="uploadHandler"
@onDeleteImg="deleteImgHandler"
@onClickImg="clickImgHandler"
:totalCount="6"
:maxSize="3"
:imgClass="'myClass'"
></Uploader>
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 属性
配置 | 用途 | 取值 | 使用描述 |
---|---|---|---|
single | 是否使用单选上传 | / | 传入该属性后,将不再支持多选上传,即一次只能选择一张图片。 |
v-model(imgList) | 图片列表 | Array | 上传图片后会自动更新图片列表数据,也可传入图片列表。格式为imgList:[{url:""} |
:totalCount | 可上传的图片数量总数最多是多少 | Number | 默认值9999。传入数量后,上传达到数量,则不展示上传入口。 |
:maxCount | 一次最多可选择的图片数量 | Number | 多选上传时一次最多可上传的数量。 由于Web端并不支持在相册选择时限制数量,这里的限制只是在选择完成后即将上传之前,作以拦截。 目前纯Web端还没有手段在相册中增加数量限制。 |
:maxSize | 一张图片的最大尺寸 | Number | 该数值为MB,比如传入1即是图片不可超过1M。 不建议超过5! |
:accept | 允许上传的图片格式 | Array | 传入数组,默认为['jpg', 'gif', 'png', 'jpeg'] 不在数组项里的格式,选择后会提示错误。 |
:overSizeTips | 图片超出最大尺寸时的提示语 | String | 当选择图片超过maxSize时,Toast提示语。 |
:errorTypeTips | 选择不支持的格式时的提示语 | String | 当选择的图片格式不在accept数组中时,Toast提示语。 |
:customClass | 组件自定义的样式类 | String | 自定义样式类的名称。 |
:imgClass | 自定义图片样式类 | String | 可设置图片宽高大小等。 |
:defaultBackgroungImage | 控件的默认占位图片链接 | String | 接受http/https格式或base64格式的图片链接,它将替换默认的组件背景图。 |
:photoColor | 上传图片区域的相机颜色 | String | 默认#ff680a。 |
@onUpload | 上传操作开始,结束的回调函数。 | $Event | 组件内已做上传处理,并在v-model中返回删除后的数组e={status: "fail", data: ""} status存在三种枚举: start 上传即将开始,即图片选择成功 success 上传成功,此时data为上传到服务端的图片url fail 上传失败,调用图片上传接口错误 |
@onClickImg | 已上传的图片点击事件 | $Event | e={index: "", data: ""} index为图片索引,data为上传到服务端的图片url |
@onDeleteImg | 已上传的图片删除事件 | $Event | 组件内已做删除处理,并在v-model中返回删除后的数组 e={index: "", data: ""} index为图片索引,data为上传到服务端的图片url |