# 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

# 属性

配置 用途 取值 使用描述
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
  • iOS
  • Android
  • Web
  • MP
v1.0.0