chrisd169/vue-core-image-upload

a vue plugin for image to crop and upload

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';
      }
    }
  }
});

NUXT

import Vue from 'vue';
import VueCoreImageUpload from 'vue-core-image-upload/dist/ssr';

Vue.use( VueCoreImageUpload );

plugins: [
  { src: '~plugins/vue-core-image-upload.js', ssr: false }
]

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

Contributions

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