vue图片上传组件

vue-img-uploader

一个基于vue的图片上传组件，分为图片预览区、图片选择器、提交按钮三部分。其中提交功能可去除，在获取图片列表后由用户自行提交。

效果图展示

效果图请戳此链接

项目地址

https://github.com/6fa/vue-im...

文档

字段	类型	描述	默认值	值类型
previewComp	属性	选择图片预览的形式，有列表形式(listPreview)和卡片形式(cardPreview)	'cardPreview'	String
selectComp	属性	选择图片选择器的形式，有拖拽板形式(dragSelector)和卡片形式(cardSelector)	'cardSelector'	String
limit	属性	图片上传最大张数		Number
maxSize	属性	图片上传最大大小, 单位为MB		Number
submit	属性	是否显示提交功能，不需要则不写。值为提交的服务器地址。		String
uploadSuccess	事件	图片上传成功时触发（在有submit属性的前提下），参数为响应结果		Function
uploadFail	事件	图片上传失败时触发（在有submit属性的前提下），参数为错误信息		Function
oversize	事件	图片超出大小限制时触发（在有maxSize属性的前提下），参数为超出限制图片在图片列表中的索引		Function
readError	事件	图片读取过程发生错误时触发，参数为错误图片在图片列表中的索引		Function

使用示例

卡片预览 + 卡片选择器 + 提交按钮：

  <uploader 
    previewComp='cardPreview' 
    selectComp='cardSelector' 
    :limit='4' 
    :submit='url' 
    :maxSize="2" 
    @uploadSuccess='handler' 
    @uploadFail='handler' 
    @oversize='handler' 
    @readError='handler'>
  </uploader>

如果不需要提交功能：

  <uploader 
    ref='uploader'
    previewComp='cardPreview' 
    selectComp='cardSelector' 
    :limit='4' 
    :maxSize="2" 
    @oversize='handler' 
    @readError='handler'>
  </uploader>

// 通过fileList属性取得用户选择的图片列表
this.$refs.uploader.fileList