Vanthink-UED / Vue Core Image Upload
a vue plugin for image to crop and upload
Stars: ✭ 1,321
Projects that are alternatives of or similar to Vue Core Image Upload
vue-img-orientation-changer
A vue plugin that can help you display image in correct orientation.
Stars: ✭ 38 (-97.12%)
Mutual labels: vue-plugin, vue-component
vue-simple-upload-component
A simple upload component for Vue.js 2.x
Stars: ✭ 14 (-98.94%)
Mutual labels: upload, vue-component
vue-drag-zone
Drag Zone component for @vuejs
Stars: ✭ 127 (-90.39%)
Mutual labels: vue-plugin, vue-component
Vue Codemirror
⌨️ @codemirror component for @vuejs
Stars: ✭ 2,115 (+60.11%)
Mutual labels: vue-component, vue-plugin
Vue Js Toggle Button
🍥 Vue.js 2 toggle / switch button - simple, pretty, customizable
Stars: ✭ 836 (-36.71%)
Mutual labels: vue-component, vue-plugin
vue-crop
[举个例子]https://codesandbox.io/s/910ro8ym9r [演示链接（戳我直达）]http://www.wwwwxy.top/html/blg/
Stars: ✭ 38 (-97.12%)
Mutual labels: crop, vue-component
ionic4-image-crop-upload
Ionic 4, Angular 7 and Cordova Crop and Upload Image
Stars: ✭ 16 (-98.79%)
Mutual labels: upload, crop
Vue Quill Editor
🍡@quilljs editor component for @vuejs
Stars: ✭ 6,874 (+420.36%)
Mutual labels: vue-component, vue-plugin
Vue Touch Ripple
👆 Touch ripple component for @vuejs
Stars: ✭ 443 (-66.46%)
Mutual labels: vue-component, vue-plugin
Vue Awesome Swiper
🏆 Swiper component for @vuejs
Stars: ✭ 12,072 (+813.85%)
Mutual labels: vue-component, vue-plugin
Vue Toastr
Vuejs Toast : Plugin and Component Capability.
Stars: ✭ 93 (-92.96%)
Mutual labels: vue-component, vue-plugin
Vue Croppa
A simple straightforward customizable mobile-friendly image cropper for Vue 2.0.
Stars: ✭ 942 (-28.69%)
Mutual labels: upload, vue-component
Vue Qrcode Reader
A set of Vue.js components for detecting and decoding QR codes.
Stars: ✭ 1,240 (-6.13%)
Mutual labels: vue-component, vue-plugin
Vaadin Upload
The Web Component for uploading multiple files with progress indication. Part of the Vaadin components.
Stars: ✭ 87 (-93.41%)
Mutual labels: upload
Svg Autocrop
🚗🌽🔳An NPM module to autocrop and slim down SVGs
Stars: ✭ 80 (-93.94%)
Mutual labels: crop
Svelte Easy Crop
A Svelte component to crop images with easy interactions
Stars: ✭ 80 (-93.94%)
Mutual labels: crop
Vue-Core-Image-Upload
a vue plugin for image upload and crop ( Support 📱 IE10+)
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 }
]
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 😄😄😄💐💐💐.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].