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