多图上传

多图片上传组件 UploadImgs, 附有预览, 排序, 验证等功能 演示效果

  • 开箱即用
  • 支持固定上传数量图片上传和不定数量图片上传
  • 支持预览
  • 支持排序
  • 内置图像验证机制
  • 内置支持 Lin-CMS 上传接口

基础示例

<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 图像完整地址, 用于展示

示例:

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)
上次更新: 7/17/2019, 5:04:32 PM