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实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
Dec 29 Javascript
Bootstrap弹出带合法性检查的登录框实例代码【推荐】
Jun 23 Javascript
jQuery获取选中单选按钮radio的值
Dec 27 Javascript
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
JavaScript实现body内任意节点的自定义属性功能示例
Sep 18 Javascript
vue cli构建的项目中请求代理与项目打包问题
Feb 26 Javascript
微信小程序实现留言板功能
Nov 02 Javascript
小程序日历控件使用方法详解
Dec 29 Javascript
JS数组求和的常用方法实例小结
Jan 07 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
修改vue源码实现动态路由缓存的方法
Jan 21 Javascript
js实现车辆管理系统
Aug 26 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的引用原因分析
2012/09/06 PHP
PHP开发中常见的安全问题详解和解决方法(如Sql注入、CSRF、Xss、CC等)
2014/04/21 PHP
php实现的常见排序算法汇总
2014/09/08 PHP
PHP实现发送微博消息功能完整示例
2019/12/04 PHP
理解JavaScript中的事件
2006/09/23 Javascript
node.js中的socket.io入门实例
2014/04/26 Javascript
Javascript字符串对象的常用方法简明版
2014/06/26 Javascript
抛弃Nginx使用nodejs做反向代理服务器
2014/07/17 NodeJs
node.js中的path.delimiter方法使用说明
2014/12/09 Javascript
jQuery实现滚动切换的tab选项卡效果代码
2015/08/26 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
2016/02/21 Javascript
php基于redis处理session的方法
2016/03/14 Javascript
jQuery实现页面点击后退弹出提示框的方法
2016/08/24 Javascript
移动前端图片压缩上传的实例
2017/12/06 Javascript
原生js实现公告滚动效果
2021/01/10 Javascript
详解用Webpack与Babel配置ES6开发环境
2019/03/12 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
2020/10/27 Javascript
[54:56]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第三局
2016/03/06 DOTA
python开发之thread线程基础实例入门
2015/11/11 Python
深入解析Python编程中super关键字的用法
2016/06/24 Python
Python弹出输入框并获取输入值的实例
2019/06/18 Python
在Pandas中处理NaN值的方法
2019/06/25 Python
python GUI库图形界面开发之PyQt5信号与槽基础使用方法与实例
2020/03/06 Python
python实现ftp文件传输系统(案例分析)
2020/03/20 Python
python 生成任意形状的凸包图代码
2020/04/16 Python
Django中使用Celery的方法步骤
2020/12/07 Python
为奢侈时尚带来了慈善元素:Olivela
2018/09/29 全球购物
安踏官方商城:anta.cn
2019/12/16 全球购物
中科软笔试题和面试题
2014/10/07 面试题
机电专业体育教师求职信
2013/09/21 职场文书
工商局副局长个人对照检查材料
2014/09/25 职场文书
2014年电厂个人工作总结
2014/11/27 职场文书
暗恋桃花源观后感
2015/06/12 职场文书
2019各种承诺书范文
2019/06/24 职场文书
django注册用邮箱发送验证码的实现
2021/04/18 Python
python全面解析接口返回数据
2022/02/12 Python