vux-uploader 图片上传组件

1.网址：https://github.com/greedying/vux-uploader

2.安装

1 2 3

npm install vux-uploader --save   npm install --save-dev babel-preset-es2015

.babelrc

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

{    "presets" : [      [ "env" , {        "modules" :  false ,        "targets" : {          "browsers" : [ "> 1%" ,  "last 2 versions" ,  "not ie <= 8" ]        }      }],      "es2015" ,      "stage-2"    ],    "plugins" : [ "transform-runtime" ],    "env" : {      "test" : {        "presets" : [ "env" ,  "es2015" ,  "stage-2" ],        "plugins" : [ "istanbul" ]      }    } }

3.使用

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

// 引入组件 import  Uploader from  'vux-uploader'   // 子组件 export  default  {    ...    components: {      ...      Uploader,      ...    }    ... }   // 使用组件 <uploader    :max= "varmax"    :images= "images"    :handle-click= "true"    :show-header= "false"    :readonly= "true"    :upload-url= "uploadUrl"    name= "img"    :params= "params"    size= "small"    @preview= "previewMethod"    @add-image= "addImageMethod"    @remove-image= "removeImageMethod" ></uploader>

参数说明：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105

images    类型: Array    默认值: []，空数组    含义: 图片数组，格式为 [ { url:  '/url/of/img.ong'  }, ...]    备注: 变量为数组时，数据流为双向，在组件内部改变数组的值影响父组件   max    类型: Number    默认值: 1    含义: 图片最大张数    备注: 图片达到max值时，新增按钮消失   showHeader    类型: Boolean    默认值:  true    含义: 是否显示头部    备注: 控制整个头部的显示   title    类型: String    默认值: 图片上传    含义: 头部的标题    备注: 不显示则留空   showTip    类型: Boolean    默认值:  true    含义: 是否显示头部数字部分，即1/3部分    备注: 当showHeader为 false 时，header整体隐藏，此时本参数无效   readonly    类型: Boolean    默认值:  false    含义: 是否只读    备注: 只读时，新增和删除按钮隐藏   handleClick    类型: Boolean    默认值:  false    含义: 是否接管新增按钮的点击事件，如果是，点击新增按钮不再自动出现选择图片界面    备注:  true 时，点击新增按钮，则$emit( 'add-image' )，可以在此事件内进行自定义的选择图片等操作,此后图片的新增、上传、删除都由使用者接管   autoUpload    类型: Boolean    默认值:  true    含义: 选择图片后是否自动上传。是，则调用内部上传接口。否，则$emit( 'upload-image' , formData) ',formData`为图片内容，用户可监听事件自己上传    备注: handleClick为true时，无法进行图片选择，故此参数无效。此参数为false时，选择图片后,$emit(' upload-image ', formData)' ,formData`为图片内容   uploadUrl    类型: String    默认值:  ''    含义: 接收上传图片的url    备注: 需要返回如下格式的json字符串，否则请设置autoUpload为 false 自行上传      {        result: 0,        message:  "result不是0时候的错误信息" ,        data: {          url:  "http://image.url.com/image.png"        }      }   name    类型: String    默认值: img    含义: 默认上传的时候，图片使用的表单name    备注: 无   params    类型: Object    默认值:  null    含义: 上传文件时携带参数    备注: 无   size    类型: String    默认值: normal    含义: 尺寸类型    备注: normal为weui默认尺寸，small为作者定义的小一些的尺寸   capture    类型: String    默认值:  ''    含义: input 的capture属性    备注: 可以设置为camera，此时点击新增按钮，部分机型会直接调起相机，注意，各型号手机表现不同，请谨慎使用。handleClick为 true 时，此属性无效    emit事件说明   add-image    emit时机: 当handleClick参数为 true 时，点击新增按钮    参数: 无    备注: 无   remove-image    emit时机: 当handleClick参数为 true 时，点击删除按钮    参数: 无    备注: 当handleClick为 false 时，点击删除按钮，组件内部删除第一张图片；否则，用户需要监听本事件，并进行相应删除操作   preview    emit时机: 点击任意一张图片的时候    参数: 图片对象，格式为 { url:  'imgUrl'  }    备注: 暂时没有实现自动预览功能，如果需要用户监听事件自行实现   upload-image    emit时机: handleClick和autoUpload都为 false `时，选择图片    参数: formData,图片内容生成的formData    备注: 可以通过vm.$refs.input获取图片的input元素