乐趣区

关于javascript:vue图片上传组件

jiezi

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
退出移动版