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处理VBArray的函数使用说明
May 11 Javascript
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
Feb 03 Javascript
JavaScript实现点击按钮后变灰避免多次重复提交
Jul 15 Javascript
JS+CSS相对定位实现的下拉菜单
Oct 06 Javascript
jquery实现表单验证简单实例演示
Nov 23 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
May 31 Javascript
AngularJS 2.0入门权威指南
Oct 08 Javascript
使用AngularJS2中的指令实现按钮的切换效果
Mar 27 Javascript
js删除数组中的元素delete和splice的区别详解
Feb 03 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
Jul 13 Javascript
javascript导出csv文件(excel)的方法示例
Aug 25 Javascript
js实现贪吃蛇游戏 canvas绘制地图
Sep 09 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
中国广播史趣谈 — 几个历史第一次
2021/03/01 无线电
PHP下利用shell后台运行PHP脚本,并获取该脚本的Process ID的代码
2011/09/19 PHP
php生成N个不重复的随机数实例
2013/11/12 PHP
php实现的九九乘法口诀表简洁版
2014/07/28 PHP
jQuery+PHP发布的内容进行无刷新分页(Fckeditor)
2015/10/22 PHP
PHP+MySql+jQuery实现的&quot;顶&quot;和&quot;踩&quot;投票功能
2016/05/21 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
Javascript条件判断使用小技巧总结
2008/09/08 Javascript
jquery 输入框数字限制插件
2009/11/10 Javascript
表单元素与非表单元素刷新区别详细解析
2013/11/06 Javascript
js实现鼠标触发图片抖动效果的方法
2015/02/27 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
2016/10/09 Javascript
vue.js或js实现中文A-Z排序的方法
2018/03/08 Javascript
使用webpack构建应用的方法步骤
2019/03/04 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
2019/03/13 Javascript
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
2019/10/26 jQuery
vue项目实现图片上传功能
2019/12/23 Javascript
[01:20]2018DOTA2亚洲邀请赛总决赛战队LGD晋级之路
2018/04/07 DOTA
[05:08]DOTA2-DPC中国联赛3月6日Recap集锦
2021/03/11 DOTA
举例讲解Python中的算数运算符的用法
2015/05/13 Python
Python命令启动Web服务器实例详解
2017/02/23 Python
Python实现改变与矩形橡胶的线条的颜色代码示例
2018/01/05 Python
使用python 3实现发送邮件功能
2018/06/15 Python
详解Python的三种可变参数
2019/05/08 Python
pandas基于时间序列的固定时间间隔求均值的方法
2019/07/04 Python
Python 脚本拉取 Docker 镜像问题
2019/11/10 Python
python装饰器三种装饰模式的简单分析
2020/09/04 Python
python 用pandas实现数据透视表功能
2020/12/21 Python
FitFlop澳大利亚官网:英国符合人体工学的鞋类品牌
2017/06/05 全球购物
The Body Shop美体小铺西班牙官网:天然化妆品
2019/06/21 全球购物
简单说说tomcat的配置
2013/05/28 面试题
九年级体育教学反思
2014/01/23 职场文书
婚礼新人答谢词
2015/01/04 职场文书
仓库统计员岗位职责
2015/04/14 职场文书
文明礼仪主题班会
2015/08/13 职场文书
Redis分布式锁的7种实现
2022/04/01 Redis