Vue-Core-Image-Upload-Mgr

本项目从vue-core-image-upload fork而来，在项目原来的基础之上做了一些优化增加了一些功能：

• 添加了预览功能，和预览样式
• 优化了裁剪背景更容易识别
• 增加了裁剪框可移动的功能
• 优化了裁剪框的样式
• 将resize组件迁移至btn头部
• 增加了裁剪框大小样式显示 效果预览：

npm包测试：

npm install vue-core-image-mgr

Vue-Core-Image-Upload

a vue plugin for image upload and crop ( Support 📱 IE10+)

查看文档

English Document

if you use vue.js(<=2.0), you should go here.Or select 1.x.x version.

Install

1npm i vue-core-image-upload --save

Code Example (ES6)

1<vue-core-image-upload
2  :class="['btn', 'btn-primary']"
3  :crop="false"
4  @imageuploaded="imageuploaded"
5  :data="data"
6  :max-file-size="5242880"
7  url="your server url" >
8</vue-core-image-upload>

1
2
3import VueCoreImageUpload  from 'vue-core-image-upload';
4
5new Vue({
6  el: '#app',
7  components: {
8    'vue-core-image-upload': VueCoreImageUpload
9  },
10  data: {
11    src: 'http://img1.vued.vanthink.cn/vued0a233185b6027244f9d43e653227439a.png',
12  },
13  methods: {
14     imageuploaded(res) {
15      if (res.errcode == 0) {
16        this.src = 'http://img1.vued.vanthink.cn/vued751d13a9cb5376b89cb6719e86f591f3.png';
17      }
18    }
19  }
20});

NUXT

1import Vue from 'vue';
2import VueCoreImageUpload from 'vue-core-image-upload/dist/ssr';
3
4Vue.use( VueCoreImageUpload );
5
6plugins: [
7  { src: '~plugins/vue-core-image-upload.js', ssr: false }
8]

Demo

Props

Props	Data Type	Example	Details
url	String	'/crop.php'	Your server api
text	String	'Upload Image'	The text of your uploading button
inputOfFile	String	'file'	Yout input[file] name
extensions	String	'png,jpg,gif'	Limit the image type
crop	Boolean	'server'	Crop image option
cropRatio	String	'1:1'	The cropped image shape
cropBtn	Object	{ok:'Save','cancel':'Give Up'}	The Text of cropping button text
maxFileSize	Number	10485760(10M)	Limit the size of the file
maxFileSize	Number	10485760(10M)	Limit the size of the file
multipleSize	Number	5	Limit the count of the file
maxWidth	Number	150	The maximum width of cropped image
maxheight	Number	150	限制图片的最大高度
inputAccept	string	'image/*' / 'image/jpg,image/jpeg,image/png'	the input[file] accept
compress	Number	50	Set the quality of compressed image
isXhr	Boolean	true	IF cancel ajax uploading
headers	Object	{auth: xxxxx}	Set customed header when ajax uploading
data	Object	{auth: xxxxx}	Set customed data when ajax posting server

Contributions

Your contributions and suggestions are welcome 😄😄😄💐💐💐.