Upload 上传

在线预览

Maker

  1. maker.upload('轮播图','pic',['/uploads/20131030/30-075657_191.jpg'])
  2.     .props({
  3.         "action": "",
  4.         "maxLength": 4,
  5.         "multiple": true,
  6.         "type": "select",
  7.         "uploadType": "image",
  8.         "name": "file",
  9.         "onSuccess": function (res,file) {
  10.             file.url = res.data.filePath;
  11.         },
  12.     })
  13.     .validate([{required:true, type: 'array', min: 3, message: '请上传3张图片', trigger: 'change'}])

JSON

  1. {
  2.     type: "upload",
  3.     field: "pic",
  4.     title: "轮播图",
  5.     value: [
  6.         '/uploads/20131030/30-075657_191.jpg',
  7.         '/uploads/20131030/30-075657_191.jpg'
  8.         ],
  9.     props: {
  10.         "type":"select",
  11.         "uploadType":"image",
  12.         "action": "/upload.php",
  13.         "name":"pic",
  14.         "multiple": true,
  15.         "accept":"image\/*",
  16.         "format":["jpg","jpeg","png","gif"],
  17.         "maxSize":2048,
  18.         "maxLength":5,
  19.         "onSuccess":function (res, file) {
  20.             file.url = res.data.filePath;
  21.         }
  22.     },
  23. }

参考:iview2.x | iview3.x

value: String | Array

props

属性 说明 类型 默认值
action 上传的地址，必填 String -
headers 设置上传的请求头部 Object {}
multiple 是否支持多选文件 Boolean false
paste 是否支持粘贴上传文件 Boolean false
disabled 3.3.0 是否禁用 Boolean false
data 上传时附带的额外参数 Object -
name 上传的文件字段名 String file
with-credentials 支持发送 cookie 凭证信息 Boolean false
show-upload-list 是否显示已上传文件列表 Boolean true
type 上传控件的类型，可选值为 select（点击选择），drag（支持拖拽） String select
accept 接受上传的文件类型 String -
format 支持的文件类型，与 accept 不同的是，format 是识别文件的后缀名，accept 为 input 标签原生的 accept 属性，会在选择文件时过滤，可以两者结合使用 Array []
max-size 文件大小限制，单位 kb Number -
before-upload 上传文件之前的钩子，参数为上传的文件，若返回 false 或者 Promise 则停止上传 Function -
on-progress 文件上传时的钩子，返回字段为 event, file, fileList Function -
on-success 文件上传成功时的钩子，返回字段为 response, file, fileList Function -
on-error 文件上传失败时的钩子，返回字段为 error, file, fileList Function -
on-preview 点击已上传的文件链接时的钩子，返回字段为 file， 可以通过 file.response 拿到服务端返回数据 Function -
on-remove 文件列表移除文件时的钩子，返回字段为 file, fileList Function -
on-format-error 文件格式验证失败时的钩子，返回字段为 file, fileList Function -
on-exceeded-size 文件超出指定大小限制时的钩子，返回字段为 file, fileList Function -
handleIcon 辅助操作按钮的图标 ,设置为false将不显示 String -
onHandle 点击辅助操作按钮事件,返回src Function -
allowRemove 是否可删除,设置为false是不显示删除按钮 Boolean true
modalTitle 图片预览弹出框标题文字 String 预览