Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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 1 month 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 (over 8 years ago)
- Default Branch: master
- Last Pushed: 2024-08-27T20:40:45.000Z (4 months ago)
- Last Synced: 2024-10-29T17:58:27.441Z (about 1 month 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.36 MB
- Stars: 1,351
- Watchers: 38
- Forks: 207
- Open Issues: 141
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-github-vue - vue-core-image-upload - 轻量级的vue上传插件 (UI组件)
- awesome-vue - vue-core-image-upload - 轻量级的vue上传插件 (UI组件)
- awesome-github-vue - vue-core-image-upload - 轻量级的vue上传插件 (UI组件)
- awesome - vue-core-image-upload - 轻量级的vue上传插件 (UI组件)
- awesome-vue - vue-core-image-upload - UED/vue-core-image-upload?style=social) - 轻量级的vue上传插件 (UI组件)
README
## Vue-Core-Image-Upload
[]()
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 😄😄😄💐💐💐.