图片上传组件

通用图片上传组件,支持配置图片宽高,数量限制等

新增上传前编辑操作配置 2018-03-12 配置方式见设置

效果预览

yml配置(普通上传,腾讯云上传配置见后面)

- model: image_upload
  name: pics
  label: logo
  readonly: '{%isOnly%}'
  multi: 4
  size: 3
  show_type: 'center'
  attrs: 
    width: 200
    height: 200
  upload_url: 'http://api2.wii.qq.com/utils/fileupload/image'
  placeholder: 请选择要上传的图片
  value: 
    - 'http://puui.qpic.cn/tv/0/4239146_190110/0'
    - 'http://puui.qpic.cn/tv/0/4239146_190110/0'
  #新增上传前裁剪字段配置
  need_edit: true #是否需要裁剪
  edit_options:
    height: 1920 #裁剪高度配置
    width: 1080 #裁剪宽度配置
    tools: false #是否展示工具栏,默认true
    mode: dialog #模式,默认平面,配置为dialog后在弹层编辑

字段说明

字段 类型 含义 默认值
model image_upload 上传模块名称 -
name String 提交表单的name值 -
label String 表单显示label名称 -
readonly Boolean 是否只读 -
multi Number 最大上传数量 9
size Array 图片的规格索引,如3代表500大小,0、160、320、500、640、2000 -
attrs Object 图片显示规格 -
attrs.width Number 图片宽度,单位像素 -
attrs.height Number 图片高度,单位像素 -
upload_url String 图片上传地址,非必填,默认http://api2.wii.qq.com/utils/fileupload/image -
placeholder String 占位提示 -
value Array 已上传的图片集合 -
show_type String 【选配】展示样式,默认全部展示,值为center时,保留宽高比,截取中间部分 -
need_edit Boolean 【选配】是否需要上传前编辑 false
edit_options Object 【选配】编辑项配置 -

腾讯云上传yml配置

- model: image_upload
  name: pics
  label: logo
  readonly: '{%isOnly%}'
  multi: 4
  size: 3
  show_type: 'center'
  placeholder: 请选择要上传的图片
  attrs: 
    width: 200
    height: 200
  # 腾讯云上传配置 具体url和appid请联系负责人咨询
  server_type: qcloud
  config: 
    url: 'https://xxxx/api/cos/ticket/get_ticket?bucket=manager'
    appid: xxxx
    bucket: 'manager'
    region: 'gz'
    folder: '/'

results matching ""

    No results matching ""