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

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

Code Example (ES6)

<vue-core-image-upload
  :class="['btn', 'btn-primary']"
  :crop="false"
  @imageuploaded="imageuploaded"
  :data="data"
  :max-file-size="5242880"
  url="your server url" >
</vue-core-image-upload>

import VueCoreImageUpload  from 'vue-core-image-upload';

new Vue({
  el: '#app',
  components: {
    'vue-core-image-upload': VueCoreImageUpload
  },
  data: {
    src: 'http://img1.vued.vanthink.cn/vued0a233185b6027244f9d43e653227439a.png',
  },
  methods: {
     imageuploaded(res) {
      if (res.errcode == 0) {
        this.src = 'http://img1.vued.vanthink.cn/vued751d13a9cb5376b89cb6719e86f591f3.png';
      }
    }
  }
});

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
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

上传多个文件

multiple

你可以使用 multiple 属性设置为true来实现多文件的上传。需要注意的是，你设置了该属性后,服务端收到文件上传的字段数据会是一个数组。

multiple-size

你可以使用multiple-size来限制图片的数量，你可以限制上传文件的数量。 <vue-core-image-upload class="btn btn-primary" :crop="false" @imageuploaded="imageUploded" :max-file-size="5242880" :multiple="true" :multiple-size="4" url="http://101.198.151.190/api/upload2.php" >

响应事件

我们在上传的不同阶段指定了不同的派发事件，你可以绑定每个事件的响应方法，实现对于流程的控制。

imageuploaded

当图片上传完，会调用该事件绑定的函数，并且用户可以获取到服务端返回的数据。

imagechanged

当input框改变选择图片时候触发，会返回input的获取的图片数据

imageuploading

当图片上传过程中触发，你可以自定义你需要处理的内容比如显示加载动画等。

errorhandle

当图片上传发生错误的时候触发，会返回错误状态信息

Code Example

Contributions

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