vu
vux-upload
npm i vux-upload
vu

vux-upload

vux上传组件

by heimuya

0.1.1 (see all)License:MITTypeScript:Not Found
npm i vux-upload
Readme

vux-upload

vux-upload是一个vue的上传组件,是对vux组件库的一个补充,同时参考了@greedying开源的组件,添加了部分功能,然后进行开源。

vux-upload实现的功能

  • 基于vux,适合vux项目
  • 增加了删除功能
  • 增加图片预览功能
  • 增加自定义headers、data、withCredentials等
  • 增加beforeUpload钩子,增加success、error、remove等事件

示例

示例

预览

快速使用

npm install vux-upload --save
// 引入组件
import VuxUpload from 'vux-upload'
// 子组件
export default {
  ...
  components: {
    ...
    VuxUpload,
    ...
  }
  ...
}
  // 使用组件
  <vux-upload
    url=""
    :headers="headers"
    :data="data"
    :images="images"
    :readonly="false"
    :max="2"
    :withCredentials="false"
    :span="4"
    :preview="true"
    @success="onSuccess"
    @error="onError"
    @remove="onRemove"
  >
  </vux-upload>

详细使用方法可参考example中的示例。

注意 接口返回参数中需要status字段,'ok'代表上传成功。

{
  status: 'ok'
}

props说明

  • images

    • 类型: Array
    • 默认值: [],空数组
    • 含义: 图片数组,格式为 [ { src: '/url/of/img.ong' }, ...]
    • 备注: 数据为双向绑定
  • readonly

    • 类型: Boolean
    • 默认值: false
    • 含义: 只读模式,无新增功能,适合查看功能
  • beforeUpload

    • 类型: Function
    • 默认值: 无
    • 含义: 上传前钩子函件
  • withCredentials

    • 类型: Boolean
    • 默认值: false
    • 含义: 是否跨域请求携带cookie等数据
  • headers

    • 类型: Array
    • 默认值: []
    • 含义: 自定义headers参数
  • data

    • 类型: Array
    • 默认值: []
    • 含义: 自定义额外数据
  • url

    • 类型: String
    • 默认值: 无,必填
    • 含义: 图片上传地址
  • span

    • 类型: Number
    • 默认值: 4
    • 含义: 单图网格所占格数,整行12格
  • max

    • 类型: Number
    • 默认值: 1
    • 含义: 图片最大张数
    • 备注: 图片达到max值时,新增按钮消失
  • accpet

    • 类型: String
    • 默认值: image/*
    • 含义: 支持上传的数据类型
  • capture

    • 类型: String
    • 默认值: ''
    • 含义: input 的capture属性
    • 备注: 可以设置为camera,此时点击新增按钮,部分机型会直接调起相机,注意,各型号手机表现不同,请谨慎使用。handleClick为true时,此属性无效
  • preview

    • 类型: Boolean
    • 默认值: true
    • 含义: 是否需要预览模式
  • compress

    • 类型: Object
    • 默认值: { quality: 0.7, fieldName: 'file' }
    • 含义: 压缩参数,详情见localResizeIMG

emit事件说明

  • success

    • emit时机: 上传成功时触发
    • 参数: res, file (res为接口返回数据,file为当前上传文件)
    • 备注: 无
  • error

    • emit时机: 压缩错误、上传错误时触发
    • 参数: event, file (file为当前上传文件)
    • 备注: 无
  • remove

    • emit时机: 点击删除按钮时触发
    • 参数: index (图片文件数组中的索引)

感谢与参考

Downloads/wk

9

GitHub Stars

22

LAST COMMIT

4yrs ago

MAINTAINERS

1

CONTRIBUTORS

3

OPEN ISSUES

5

OPEN PRs

0
VersionTagPublished
0.1.1
latest
5yrs ago
No alternatives found
No tutorials found
Add a tutorial

Rate & Review

100
No reviews found
Be the first to rate