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中eval函数的使用示例
Jul 21 Javascript
jQuery遍历Form示例代码
Sep 03 Javascript
JavaScript中用于四舍五入的Math.round()方法讲解
Jun 15 Javascript
javascript中sort排序实例详解
Jul 24 Javascript
Mongoose学习全面理解(推荐)
Jan 21 Javascript
BootStrap数据表格实例代码
Sep 13 Javascript
Vue.js 表单控件操作小结
Mar 29 Javascript
js canvas实现画图、滤镜效果
Nov 27 Javascript
node.js实现上传文件功能
Jul 15 Javascript
使用layui实现树形结构的方法
Sep 20 Javascript
AngularJS动态生成select下拉框的方法实例
Nov 17 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
Feb 01 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的ob_start();控制您的浏览器cache!
2007/02/14 PHP
PHP 多进程 解决难题
2009/06/22 PHP
thinkphp中session和cookie无效的解决方法
2014/12/19 PHP
PHP生成唯一订单号
2015/07/05 PHP
学习php设计模式 php实现命令模式(command)
2015/12/08 PHP
yii框架使用分页的方法分析
2019/07/25 PHP
JavaScript CSS修改学习第六章 拖拽
2010/02/19 Javascript
nodejs实用示例 缩址还原
2010/12/28 NodeJs
extjs 初始化checkboxgroup值的代码
2011/09/21 Javascript
cookie.js 加载顺序问题怎么才有效
2013/07/31 Javascript
jQuery获取当前对象标签名称的方法
2014/02/07 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
2015/08/25 Javascript
JS实现的简洁二级导航菜单雏形效果
2015/10/13 Javascript
每天一篇javascript学习小结(Array数组)
2015/11/11 Javascript
JavaScript组件开发完整示例
2015/12/15 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
2016/05/04 Javascript
JavaScript直播评论发弹幕切图功能点集合效果代码
2016/06/26 Javascript
基于vue.js实现分页查询功能
2018/12/29 Javascript
通过实例学习React中事件节流防抖
2019/06/17 Javascript
使用纯前端JavaScript实现Excel导入导出方法过程详解
2020/08/07 Javascript
更改Python命令行交互提示符的方法
2015/01/14 Python
Android应用开发中Action bar编写的入门教程
2016/02/26 Python
python+pillow绘制矩阵盖尔圆简单实例
2018/01/16 Python
windows7 32、64位下python爬虫框架scrapy环境的搭建方法
2018/11/29 Python
Pytorch中实现只导入部分模型参数的方式
2020/01/02 Python
python3中数组逆序输出方法
2020/12/01 Python
法国美发器材和产品购物网站:Beauty Coiffure
2016/12/05 全球购物
巴西美妆购物网站:Kutiz Beauté
2019/03/13 全球购物
简述进程的启动、终止的方式以及如何进行进程的查看
2014/02/20 面试题
毕业生实习鉴定
2013/12/11 职场文书
销售简历自我评价
2014/01/24 职场文书
清华大学自主招生自荐信
2014/01/29 职场文书
项目采购员岗位职责
2014/04/15 职场文书
企业宣传口号
2014/06/12 职场文书
2016年学习雷锋精神广播稿
2015/12/17 职场文书
Mysql事务索引知识汇总
2022/03/17 MySQL