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方法
Sep 29 Javascript
javascript学习笔记(八)正则表达式
Oct 08 Javascript
jQuery实现垂直半透明手风琴特效代码分享
Aug 21 Javascript
简单谈谈javascript中this的隐式绑定
Feb 22 Javascript
Highcharts学习之数据列
Aug 03 Javascript
angular仿支付宝密码框输入效果
Mar 25 Javascript
JavaScript生成指定范围随机数和随机序列的方法
May 05 Javascript
JS实现点击拉拽轮播图pc端移动端适配
Sep 05 Javascript
vue中组件的过渡动画及实现代码
Nov 21 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
Sep 02 Javascript
JS使用正则表达式判断输入框失去焦点事件
Oct 16 Javascript
javascript实现数字时钟效果
Feb 06 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/03 冲泡冲煮
基于PHP实现数据分页显示功能
2016/05/26 PHP
PHP实现页面静态化深入讲解
2021/03/04 PHP
jquery如何改变html标签的样式(两种实现方法)
2013/01/16 Javascript
jQuery的框架介绍
2016/05/11 Javascript
jQuery获取浏览器类型和版本号的方法
2016/07/05 Javascript
关于在mongoose中填充外键的方法详解
2017/08/14 Javascript
对vue.js中this.$emit的深入理解
2018/02/23 Javascript
node的process以及child_process模块学习笔记
2018/03/06 Javascript
js中document.write和document.writeln的区别
2018/03/11 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
2018/08/13 Javascript
Element UI 自定义正则表达式验证方法
2018/09/04 Javascript
Vue表单之v-model绑定下拉列表功能
2019/05/14 Javascript
Vue 实现输入框新增搜索历史记录功能
2019/10/15 Javascript
python监控网卡流量并使用graphite绘图的示例
2014/04/27 Python
Python中的defaultdict模块和namedtuple模块的简单入门指南
2015/04/01 Python
基于Python实现文件大小输出
2016/01/11 Python
举例讲解如何在Python编程中进行迭代和遍历
2016/01/19 Python
Python3实现发送QQ邮件功能(附件)
2020/12/23 Python
Python+OpenCV目标跟踪实现基本的运动检测
2018/07/10 Python
Python3之不使用第三方变量,实现交换两个变量的值
2019/06/26 Python
Django框架下静态模板的继承操作示例
2019/11/08 Python
在Pytorch中计算卷积方法的区别详解(conv2d的区别)
2020/01/03 Python
python中的垃圾回收(GC)机制
2020/09/21 Python
天巡全球:Skyscanner Global
2017/06/20 全球购物
军训考核自我鉴定
2014/02/13 职场文书
中药学专业求职信
2014/05/31 职场文书
2014年幼儿园重阳节活动方案
2014/09/16 职场文书
房屋授权委托书范本
2014/10/07 职场文书
社会治安综合治理责任书
2015/01/29 职场文书
公司管理建议书
2015/09/14 职场文书
写作技巧:怎样写好一份优秀工作总结?
2019/08/14 职场文书
基于CSS3画一个iPhone
2021/04/21 HTML / CSS
python scipy 稀疏矩阵的使用说明
2021/05/26 Python
Win11局域网共享权限在哪里设置? Win11高级共享的设置技巧
2022/04/05 数码科技
方法汇总:Python 安装第三方库常用
2022/04/26 Python