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 建立对象的方法
Apr 21 Javascript
javascript prototype 原型链
Mar 12 Javascript
Jquery插件写法笔记整理
Sep 06 Javascript
js 为label标签和div标签赋值的方法
Aug 08 Javascript
js unicode 编码解析关于数据转换为中文的两种方法
Apr 21 Javascript
JavaScript多并发问题如何处理
Oct 28 Javascript
基于javascript实现简单计算器功能
Jan 03 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
Oct 14 Javascript
jQuery将表单序列化成一个Object对象的实例
Nov 29 Javascript
提高JavaScript执行效率的23个实用技巧
Mar 01 Javascript
使用JSON格式提交数据到服务端的实例代码
Apr 01 Javascript
JS实现读取xml内容并输出到div中的方法示例
Apr 19 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
Zerg基本策略
2020/03/14 星际争霸
第1次亲密接触PHP5(1)
2006/10/09 PHP
关于PHP中的Class的几点个人看法
2006/10/09 PHP
PHP+MySQL 手工注入语句大全 推荐
2009/10/30 PHP
浅谈PHP变量作用域以及地址引用问题
2013/12/27 PHP
PHP防盗链的基本思想 防盗链的设置方法
2015/09/25 PHP
CodeIgniter连贯操作的底层原理分析
2016/05/17 PHP
javascript笔试题目附答案@20081025_jb51.net
2008/10/26 Javascript
ASP SQL防注入的方法
2008/12/25 Javascript
ECMAScript 创建自己的js类库
2012/11/22 Javascript
使用JQuery库提供的扩展功能实现自定义方法
2014/09/09 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
2015/04/30 Javascript
文字垂直滚动之javascript代码
2015/07/29 Javascript
JS滚动到指定位置导航栏固定顶部
2017/07/03 Javascript
Nuxt.js踩坑总结分享
2018/01/18 Javascript
深入理解Vue nextTick 机制
2018/04/28 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
2018/05/16 Javascript
Vue实现数据请求拦截
2019/10/23 Javascript
[00:11]战神迅矛
2019/03/06 DOTA
介绍Python中几个常用的类方法
2015/04/08 Python
Python中函数的参数传递与可变长参数介绍
2015/06/30 Python
python读取各种文件数据方法解析
2018/12/29 Python
pytorch 改变tensor尺寸的实现
2020/01/03 Python
Pycharm pyuic5实现将ui文件转为py文件,让UI界面成功显示
2020/04/08 Python
Speedo速比涛法国官方网站:泳衣、泳镜、泳帽、泳裤
2019/07/30 全球购物
高三自我鉴定范文
2013/10/19 职场文书
行政助理求职自荐信
2013/10/26 职场文书
高中毕业生的个人自我评价
2014/02/21 职场文书
战略合作意向书
2014/07/29 职场文书
关于晚自习早退的检讨书
2014/09/13 职场文书
合伙购房协议样本
2014/10/06 职场文书
党员个人整改方案及措施
2014/10/25 职场文书
2014年物业公司工作总结
2014/11/22 职场文书
安全承诺书
2015/01/19 职场文书
公司老总年会致辞
2015/07/30 职场文书
Python基础之变量的相关知识总结
2021/06/23 Python