您的位置:88bifa必发唯一官网 > 必发88首页 > 小编会及时回复大家的

小编会及时回复大家的

发布时间:2019-05-27 01:25编辑:必发88首页浏览(58)

    1.网址:  

    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: ""
          }
        }
    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 图片上传组件的安装使用方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

    您可能感兴趣的文章:

    • 使用vux实现上拉刷新功能遇到的坑
    • vue.js整合vux中的上拉加载下拉刷新实例教程
    • Vue Vux项目实践完整代码
    • 基于Vue框架vux组件库实现上拉刷新功能
    • vue vux实现移动端文件上传样式
    • Vue中使用vux的配置详解

    本文由88bifa必发唯一官网发布于必发88首页,转载请注明出处:小编会及时回复大家的

    关键词: 必发88首页