vux uploader 图片上传组件的安装使用方法


Posted in Javascript onMay 15, 2018

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

2.安装

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

{
 "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.使用

// 引入组件
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>

参数说明:

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元素

总结

以上所述是小编给大家介绍的vux uploader 图片上传组件的安装使用方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS俄罗斯方块,包含完整的设计理念
Dec 11 Javascript
给Flash加一个超链接(推荐使用透明层)兼容主流浏览器
Jun 09 Javascript
javascript去掉前后空格的实例
Nov 07 Javascript
当滚动条滚动到页面底部自动加载增加内容的js代码
May 13 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
May 14 Javascript
javascript下拉框选项单击事件的例子分享
Mar 04 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
Aug 25 Javascript
javascript判断图片是否加载完成的方法推荐
May 13 Javascript
基于原生js淡入淡出函数封装(兼容IE)
Oct 20 Javascript
js中bool值的转换及“&amp;&amp;”、“||”、 “!!”详解
Dec 21 Javascript
解决LayUI数据表格复选框不居中显示的问题
Sep 25 Javascript
element-ui tree结构实现增删改自定义功能代码
Aug 31 Javascript
使用webpack搭建react开发环境的方法
May 15 #Javascript
浅谈Node.js 沙箱环境
May 15 #Javascript
npm全局模块卸载及默认安装目录修改方法
May 15 #Javascript
WebPack配置vue多页面的技巧
May 15 #Javascript
修改npm全局安装模式的路径方法
May 15 #Javascript
修改node.js默认的npm安装目录实例
May 15 #Javascript
Vue中的scoped实现原理及穿透方法
May 15 #Javascript
You might like
PHP 在线翻译函数代码
2009/05/07 PHP
解析php中memcache的应用
2013/06/18 PHP
解析thinkphp中的M()与D()方法的区别
2013/06/22 PHP
php自定义函数实现JS的escape的方法示例
2016/07/07 PHP
php版微信公众平台之微信网页登陆授权示例
2016/09/23 PHP
php微信公众号开发(4)php实现自定义关键字回复
2016/12/15 PHP
php自定义截取中文字符串-utf8版
2017/02/27 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
thinkphp5框架路由原理与用法详解
2020/02/11 PHP
PHP数组与字符串互相转换实例
2020/05/05 PHP
URL编码转换,escape() encodeURI() encodeURIComponent()
2006/12/27 Javascript
javascript 另一种图片滚动切换效果思路
2012/04/20 Javascript
早该知道的7个JavaScript技巧
2013/03/27 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
2014/04/10 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
2015/08/18 Javascript
jQuery 3.0 的 setter和getter 模式详解
2016/07/11 Javascript
JS获取及验证开始结束日期的方法
2016/08/20 Javascript
nodeJS实现简单网页爬虫功能的实例(分享)
2017/06/08 NodeJs
详解angular分页插件tm.pagination二次触发问题解决方案
2018/07/20 Javascript
react项目实践之webpack-dev-serve
2018/09/14 Javascript
vue项目持久化存储数据的实现代码
2018/10/01 Javascript
ionic2.0双击返回键退出应用
2019/09/17 Javascript
基于Vue 撸一个指令实现拖拽功能
2019/10/09 Javascript
jQuery实现带进度条的轮播图
2020/09/13 jQuery
Javascript实现单选框效果
2020/12/09 Javascript
python解析xml文件操作实例
2014/10/05 Python
最基础的Python的socket编程入门教程
2015/04/23 Python
对python判断ip是否可达的实例详解
2019/01/31 Python
Python3实现二叉树的最大深度
2019/09/30 Python
简单了解Python3 bytes和str类型的区别和联系
2019/12/19 Python
护士自我介绍信
2014/01/13 职场文书
大学班长的职责
2014/01/27 职场文书
运动会广播稿200米(5篇)
2014/10/15 职场文书
先进工作者事迹材料
2014/12/23 职场文书
2019假期福利管理制度!
2019/07/15 职场文书
【TED出品】天梯非主流开心游1700 划水骑士
2022/03/31 魔兽争霸