vue带有图像压缩器的多文件上传器–handy-uploader

vue带有图像压缩器的多文件上传器–handy-uploader
插件名称 handy-uploader
版本号 v1.1.8
发布时间 2020年10月13日
插件作者 alijahanpak

一个简单但功能丰富的文件上传器,带有用于Vue.js组件的图像压缩器。

安装和下载:

# Yarn
$ yarn add handy-uploader

# NPM
$ npm i handy-uploader --save

基本用法:

1.导入并注册Handy Uploader。

import handyUploader from 'handy-uploader/src/components/handyUploader';
export default {
  components: {
    handyUploader,
  },
}

2.将Handy Uploader组件添加到应用模板。

<handy-uploader
  :documentAttachment.sync="handyAttachments"
  :fileUploaderType= "'simple'"
>
</handy-uploader>

3.可能的道具。

/**
 * 数组包含文件
 */
documentAttachment: [Array],
/**
 *发送API信息到 'add' 和'delete'.
 * f.e: /building/add or /building/delete
 */
maxFileSize: {
  type: Number,
  default: 5120,
},
/**
 * 选择文件上载程序类型
 */
fileUploaderType: {
  type: String,
  default: 'thumbnail'
},
/**
 * 最大文件上载
 */
maxFileCount: {
  type: Number,
  default: 0
},
/**
 * 选择文件上传卡类型
 */
cardType: String,
/**
 * 证卡文件计数器状态
 */
badgeCounter: {
  type: Boolean,
  default: true
},
/**
 * 更改按钮颜色
 */
btnColor: {
  type: String,
  default: 'info'
},
/**
 * 启用/禁用图像压缩程序
 */
imageCompressor: Boolean,
/**
 * 图像压缩级别(0到1)
 */
imageCompressLevel: {
  type: Number,
  default: 0.5
},
/**
 * 接受上载的文件
 */
fileAccept: String,
/**
 * 在表和简单文件上载程序中显示/隐藏图像拇指
 */
thumb: {
  type: Boolean,
  default: true
},
/**
 * 在表中隐藏文件/显示缩略图列
 */
tableThumbColumn: Boolean,
/**
 * 启用/禁用表固定标头
 */
tableFixedHeader: {
  type: Boolean,
  default: true
},
/**
 * 设置表格高度
 */
tableHeight: {
  type: Number,
  default: 400
},
/**
 * 启用RTL支持语言
 */
rtlSupport: {
  type: Boolean,
  default: false
},
/**
 * 更改文件上载程序语言
 */
lang: {
  type: String,
  default: 'en'
},
/**
 * 上载前更改文件名
 */
changeFileName: {
  type: Boolean,
  default: false
},
/**
 * 上传前添加文件说明
 */
addFileDescription: {
  type: Boolean,
  default: false
},
/**
 * 上载前添加文件标记
 */
addFileTag: {
  type: Boolean,
  default: false
},
/**
 * 文件标记数组
 */
tags: {
  type: Array,
},
/**
 * 更改列数
 */
cols: {
  type: Number,
  default: 4
},
/**
 * 为上传程序定义自定义语言
 */
customLang: {
  type: Object,
  default: null
},
/**
 * 设置插入/添加新文件权限
 */
insertPermission: {
  type: Boolean,
  default: true
},
/**
 * 设置编辑权限
 */
editPermission: {
  type: Boolean,
  default: true
},
/**
 * 设置删除权限
 */
deletePermission: {
  type: Boolean,
  default: true
},

变更日志:

v1.1.8 (07/17/2021)

  • 修复了初始方便的上传器附件的错误

v1.1.7(05/06/2021)

  • 固定子组件

v1.1.5(2020年12月29日)

  • 改进的用户界面

v1.1.4(2020年12月29日)

  • 改进的用户界面

v1.1.4(11/07/2020)

  • 修复了rtl Suport表头的错误