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 相关文章推荐
JavaScript原生对象之Number对象的属性和方法详解
Mar 13 Javascript
一道JS前端闭包面试题解析
Dec 25 Javascript
原生JS实现匀速图片轮播动画
Oct 18 Javascript
利用js判断手机是否安装某个app的多种方案
Feb 13 Javascript
Vue.js在使用中的一些注意知识点
Apr 29 Javascript
JavaScript简介_动力节点Java学院整理
Jun 26 Javascript
Angularjs中数据绑定的实例详解
Aug 25 Javascript
谈谈React中的Render Props模式
Dec 06 Javascript
Vue 中的受控与非受控组件的实现
Dec 17 Javascript
vue等两个接口都返回结果再执行下一步的实例
Sep 08 Javascript
JS操作JSON常用方法(10w阅读)
Dec 06 Javascript
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
使用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
Windows下PHP的任意文件执行漏洞
2006/10/09 PHP
Php Mssql操作简单封装支持存储过程
2009/12/11 PHP
PHP读取CURL模拟登录时生成Cookie文件的方法
2014/11/04 PHP
php中使用gd库实现远程图片下载实例
2015/05/12 PHP
PHP实现简单搜歌的方法
2015/07/28 PHP
Laravel实现定时任务的示例代码
2017/08/10 PHP
Laravel框架创建路由的方法详解
2019/09/04 PHP
PHP实现图片防盗链破解操作示例【解决图片防盗链问题/反向代理】
2020/05/29 PHP
jQuery实现点击按钮弹出可关闭层的浮动层插件
2015/09/19 Javascript
jQuery qrcode生成二维码的方法
2016/04/03 Javascript
深入分析node.js的异步API和其局限性
2016/09/05 Javascript
nodejs入门教程一:概念与用法简介
2017/04/24 NodeJs
React如何利用相对于根目录进行引用组件详解
2017/10/09 Javascript
Express之托管静态文件的方法
2018/06/01 Javascript
Django模板继承 extend标签实例代码详解
2019/05/16 Javascript
微信小程序云开发之新手环境配置
2019/05/16 Javascript
vue keep-alive 动态删除组件缓存的例子
2019/11/04 Javascript
[07:03]显微镜下的DOTA2第九期——430圣堂刺客杀戮秀
2014/06/20 DOTA
Flask框架中密码的加盐哈希加密和验证功能的用法详解
2016/06/07 Python
PyQt5每天必学之像素图控件QPixmap
2018/04/19 Python
PyQt5实现拖放功能
2018/04/25 Python
Python3之简单搭建自带服务器的实例讲解
2018/06/04 Python
Python实现的网页截图功能【PyQt4与selenium组件】
2018/07/12 Python
python实现向微信用户发送每日一句 python实现微信聊天机器人
2019/03/27 Python
Python配置文件处理的方法教程
2019/08/29 Python
python模块和包的应用BASE_PATH使用解析
2019/12/14 Python
python 求10个数的平均数实例
2019/12/16 Python
python递归调用中的坑:打印有值, 返回却None
2020/03/16 Python
英国IT硬件供应商,定制游戏PC:Mesh Computers
2019/03/28 全球购物
新西兰Bookabach:查找全球度假屋
2020/12/03 全球购物
《画》教学反思
2014/04/14 职场文书
办理房产证委托书
2014/09/18 职场文书
工作收入住址证明
2014/10/28 职场文书
画展邀请函
2015/01/31 职场文书
javascript对象3个属性特征
2021/11/17 Javascript
从零开始在Centos7上部署SpringBoot项目
2022/04/07 Servers