https://github.com/vanthink-ued/vue-core-image-upload

a vue plugin for image to crop and upload
https://github.com/vanthink-ued/vue-core-image-upload

crop upload vue vue-component vue-plugin

Last synced: about 22 hours ago
JSON representation

a vue plugin for image to crop and upload

• Host: GitHub
• URL: https://github.com/vanthink-ued/vue-core-image-upload
• Owner: Vanthink-UED
• Created: 2016-09-06T05:19:37.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2023-09-05T06:38:00.000Z (about 1 year ago)
• Last Synced: 2024-04-13T09:18:02.859Z (6 months ago)
• Topics: crop, upload, vue, vue-component, vue-plugin
• Language: Vue
• Homepage: http://vanthink-ued.github.io/vue-core-image-upload/index.html
• Size: 2.35 MB
• Stars: 1,355
• Watchers: 38
• Forks: 208
• Open Issues: 140
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## Vue-Core-Image-Upload

[![npm](https://img.shields.io/npm/v/vue-core-image-upload.svg?maxAge=2592000)]()

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

[查看文档](http://vanthink-ued.github.io/vue-core-image-upload/index.html#/cn/get-started)

[English Document](http://vanthink-ued.github.io/vue-core-image-upload/index.html#/en/home)

if you use vue.js(<=2.0), you should go [here](https://github.com/Vanthink-UED/vue-core-image-upload/tree/v1.x).Or select

1.x.x version.



### Install

``` bash

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

```

Code Example (ES6)

``` html

```

``` js

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

``` js

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](http://vanthink-ued.github.io/vue-core-image-upload/index.html)

### 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 😄😄😄💐💐💐.