vue-upload-cropper

整合了一些常用的表单验证正则规则，返回 elementUI Form 的表单验证规则

Usage no npm install needed!

<script type="module">
  import vueUploadCropper from 'https://cdn.skypack.dev/vue-upload-cropper';
</script>

README

vue-upload-cropper

结合 element-ui upload + vue-cropper 进行图片初始化渲染，图片上传裁剪的封装

Demo

https://cmqiong.github.io/vue-upload-cropper/example

Notices

使用条件：

  • 使用 elementUI
  • 编译环境安装并配置 babel-plugin-transform-vue-jsx，babel-plugin-syntax-jsx

Installation

npm i vue-upload-cropper

Usage

main.js

import UploadCropper from 'vue-upload-cropper'

Vue.use(UploadCropper)

or

import UploadCropper from 'vue-upload-cropper'

Vue.component('upload-cropper', UploadCropper)

.vue

<upload-cropper
  method="put"                   // 当 autoUpload=true 时有效，不写默认 post 表单提交
  :limit="3"                     // 限制上传图片最多张数
  :limitSize="1024"              // 限制上传文件大小，单位 kb
  :fileList="yourInitListData"   // 用来初始化绑定数据
  :cropper="{                    // 一般情况下，只需设置下面几个，其它详细说明见下面文档
    height: 300,         // 裁剪组件背景区域的高度，单位 px，不写默认 300
    autoCrop: true,      // 是否默认初始化裁剪框
    autoCropWidth: 300,  // 初始化裁剪框宽度，单位 px
    autoCropHeight: 300, // 初始化裁剪框高度，单位 px
    fixed: true,         // 是否固定裁剪比例
    fixedNumber: [1, 1]  // 固定裁剪比例[width, height]
  }"></upload-cropper>

Attribute

  • 概述：与 ELUpload 的不同：不支持文件多选，不支持拖拽上传。增加几个新属性。其它用法与 ELUpload 同。

  • 本插件新增属性：

参数 说明 类型 可选值 默认值
refName 可选参数，组件 ref 名称 String - photoUpload
method 可选参数，当 autoUpload=true 时有效 String post/put post
limit 可选参数，上传图片张数限制 Number - -
limitSize 可选参数，上传的图片大小限制，单位：kb Number - -
cropper 可选参数，裁剪框设置选项 Object - 详见 vue-cropper