Installations
npm install vue-image-crop-uploadDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
11.5.0
NPM Version
7.5.4
Score
81
Supply Chain
99.7
Quality
75.8
Maintenance
100
Vulnerability
100
License
Releases
Unable to fetch releases
Contributors
36
Unable to fetch Contributors
Languages
5
JavaScript
Vue
CSS
SCSS
HTML
JavaScript (93.55%)
Vue (4.72%)
CSS (0.95%)
SCSS (0.5%)
HTML (0.27%)
Love this project? Help keep it running — sponsor us today! 🚀
Developer
Download Statistics
Total Downloads
1,778,679
Last Day
191
Last Week
5,543
Last Month
23,060
Last Year
269,910
GitHub Statistics
2,091 Stars
181 Commits
369 Forks
39 Watchers
16 Branches
36 Contributors
Updated on Feb 16, 2025
Bundle Size
16.51 kB
Minified
2.24 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
3.0.3
Package Id
vue-image-crop-upload@3.0.3
Unpacked Size
2.65 MB
Size
772.66 kB
File Count
29
NPM Version
7.5.4
Node Version
11.5.0
Total Downloads
Cumulative downloads
Total Downloads
1,778,679
Last Day
-39.2%
191
Compared to previous day
Last Week
-1.1%
5,543
Compared to previous week
Last Month
17.1%
23,060
Compared to previous month
Last Year
-7.3%
269,910
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
Dev Dependencies
37
babelbabel-corebabel-eslintbabel-loaderbabel-plugin-transform-runtimebabel-polyfillbabel-preset-es2015babel-preset-stage-2babel-preset-stage-3browser-syncclassnamescross-envcss-loadereslintgulpgulp-autoprefixergulp-changedgulp-load-pluginsgulp-plumbergulp-sassgulp-uglifygulp-utilgulp-watchgulp.spritesmithhtml-webpack-pluginnode-sasssass-loaderscssscss-loaderstyle-loadervinyl-namedvuevue-html-loadervue-loadervue-style-loaderwebpackwebpack-stream
vue-image-crop-upload
中文文档.
A beautiful vue component for image crop and upload.
Notice: This component is designed for pc, not recommended for use on the mobile side.
Change log
@3.0.0
- Compatible vue3
Demo
Screenshot
Brower compatibility
IE10+
Install
npm
1$ npm install vue-image-crop-upload
Usage
Props
| Name | Type | Default | Description |
|---|---|---|---|
| url | String | '' | Server api path,like "/avatar/upload", If empty, will not be uploaded |
| method | String | 'POST' | request http method |
| field | String | 'upload' | Upload input filename, used for server side get the file stream. |
| value | Boolean | twoWay | show or not |
| params | Object | null | POST Params，like "{k:v}" |
| headers | Object | null | POST request header，like "{k:v}" |
| langType | String | 'zh' | language type |
| langExt | Object | language extend | |
| width | Number | 200 | width of receive image |
| height | Number | 200 | height of receive image |
| imgFormat | string | 'png' | jpg/png, Server api receive file type. |
| imgBgc | string | '#fff' | background color, if the imgFormat prop is jpg |
| noCircle | Boolean | false | disable circle preview |
| noSquare | Boolean | false | disable square preview |
| noRotate | Boolean | true | disable rotate function |
| withCredentials | Boolean | false | support cross-domain |
Events
| Name | Description |
|---|---|
| srcFileSet | Once you've selected the file, params( fileName, fileType, fileSize ) |
| cropSuccess | image crop success, params( imageDataUrl, field ) |
| cropUploadSuccess | upload success, params( jsonData, field ) |
| cropUploadFail | upload fail, params( status, field ) |
Language package
Example Of "langExt"
1{ 2 hint: 'Click or drag the file here to upload', 3 loading: 'Uploading…', 4 noSupported: 'Browser is not supported, please use IE10+ or other browsers', 5 success: 'Upload success', 6 fail: 'Upload failed', 7 preview: 'Preview', 8 btn: { 9 off: 'Cancel', 10 close: 'Close', 11 back: 'Back', 12 save: 'Save' 13 }, 14 error: { 15 onlyImg: 'Image only', 16 outOfSize: 'Image exceeds size limit: ', 17 lowestPx: 'Image\'s size is too low. Expected at least: ' 18 } 19}
Example vue@3
1<div id="app"> 2 <a class="btn" @click="toggleShow">set avatar</a> 3 <my-upload field="img" 4 @crop-success="cropSuccess" 5 @crop-upload-success="cropUploadSuccess" 6 @crop-upload-fail="cropUploadFail" 7 v-model="show" 8 :width="300" 9 :height="300" 10 url="/upload" 11 :params="params" 12 :headers="headers" 13 img-format="png"></my-upload> 14 <img :src="imgDataUrl"> 15</div> 16 17<script> 18 import 'babel-polyfill'; // es6 shim 19 import Vue from 'vue'; 20 import myUpload from 'vue-image-crop-upload'; 21 22 new Vue({ 23 el: '#app', 24 data: { 25 show: true, 26 params: { 27 token: '123456798', 28 name: 'avatar' 29 }, 30 headers: { 31 smail: '*_~' 32 }, 33 imgDataUrl: '' // the datebase64 url of created image 34 }, 35 components: { 36 'my-upload': myUpload 37 }, 38 methods: { 39 toggleShow() { 40 this.show = !this.show; 41 }, 42 /** 43 * crop success 44 * 45 * [param] imgDataUrl 46 * [param] field 47 */ 48 cropSuccess(imgDataUrl, field){ 49 console.log('-------- crop success --------'); 50 this.imgDataUrl = imgDataUrl; 51 }, 52 /** 53 * upload success 54 * 55 * [param] jsonData server api return data, already json encode 56 * [param] field 57 */ 58 cropUploadSuccess(jsonData, field){ 59 console.log('-------- upload success --------'); 60 console.log(jsonData); 61 console.log('field: ' + field); 62 }, 63 /** 64 * upload fail 65 * 66 * [param] status server api return error status, like 500 67 * [param] field 68 */ 69 cropUploadFail(status, field){ 70 console.log('-------- upload fail --------'); 71 console.log(status); 72 console.log('field: ' + field); 73 } 74 } 75 }); 76</script>
Example vue@2
1<div id="app"> 2 <a class="btn" @click="toggleShow">set avatar</a> 3 <my-upload field="img" 4 @crop-success="cropSuccess" 5 @crop-upload-success="cropUploadSuccess" 6 @crop-upload-fail="cropUploadFail" 7 v-model="show" 8 :width="300" 9 :height="300" 10 url="/upload" 11 :params="params" 12 :headers="headers" 13 img-format="png"></my-upload> 14 <img :src="imgDataUrl"> 15</div> 16 17<script> 18 import 'babel-polyfill'; // es6 shim 19 import Vue from 'vue'; 20 import myUpload from 'vue-image-crop-upload/upload-2.vue'; 21 22 new Vue({ 23 el: '#app', 24 data: { 25 show: true, 26 params: { 27 token: '123456798', 28 name: 'avatar' 29 }, 30 headers: { 31 smail: '*_~' 32 }, 33 imgDataUrl: '' // the datebase64 url of created image 34 }, 35 components: { 36 'my-upload': myUpload 37 }, 38 methods: { 39 toggleShow() { 40 this.show = !this.show; 41 }, 42 /** 43 * crop success 44 * 45 * [param] imgDataUrl 46 * [param] field 47 */ 48 cropSuccess(imgDataUrl, field){ 49 console.log('-------- crop success --------'); 50 this.imgDataUrl = imgDataUrl; 51 }, 52 /** 53 * upload success 54 * 55 * [param] jsonData server api return data, already json encode 56 * [param] field 57 */ 58 cropUploadSuccess(jsonData, field){ 59 console.log('-------- upload success --------'); 60 console.log(jsonData); 61 console.log('field: ' + field); 62 }, 63 /** 64 * upload fail 65 * 66 * [param] status server api return error status, like 500 67 * [param] field 68 */ 69 cropUploadFail(status, field){ 70 console.log('-------- upload fail --------'); 71 console.log(status); 72 console.log('field: ' + field); 73 } 74 } 75 }); 76</script>
Example vue@1
1<div id="app"> 2 <a class="btn" @click="toggleShow">set avatar</a> 3 <my-upload field="img" 4 :width="300" 5 :height="300" 6 url="/upload" 7 :params="params" 8 :headers="headers" 9 lang-type="en" 10 :value.sync="show" 11 img-format="png"></my-upload> 12 <img :src="imgDataUrl"> 13</div> 14 15<script> 16 import 'babel-polyfill'; // es6 shim 17 import Vue from 'vue'; 18 import myUpload from 'vue-image-crop-upload/upload-1.vue'; 19 20 new Vue({ 21 el: '#app', 22 data: { 23 show: true, 24 params: { 25 token: '123456798', 26 name: 'avatar' 27 }, 28 headers: { 29 smail: '*_~' 30 }, 31 imgDataUrl: '' // the datebase64 url of created image 32 }, 33 components: { 34 'my-upload': myUpload 35 }, 36 methods: { 37 toggleShow() { 38 this.show = !this.show; 39 } 40 }, 41 events: { 42 /** 43 * crop success 44 * 45 * [param] imgDataUrl 46 * [param] field 47 */ 48 cropSuccess(imgDataUrl, field){ 49 console.log('-------- crop success --------'); 50 this.imgDataUrl = imgDataUrl; 51 }, 52 /** 53 * upload success 54 * 55 * [param] jsonData server api return data, already json encode 56 * [param] field 57 */ 58 cropUploadSuccess(jsonData, field){ 59 console.log('-------- upload success --------'); 60 console.log(jsonData); 61 console.log('field: ' + field); 62 }, 63 /** 64 * upload fail 65 * 66 * [param] status server api return error status, like 500 67 * [param] field 68 */ 69 cropUploadFail(status, field){ 70 console.log('-------- upload fail --------'); 71 console.log(status); 72 console.log('field: ' + field); 73 } 74 } 75 }); 76 77</script>
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
Found 13/21 approved changesets -- score normalized to 6
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
license file not detected
Details
- Warn: project does not have a license file
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 22 are checked with a SAST tool
Reason
118 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-6chw-6frg-f759
- Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
- Warn: Project is vulnerable to: GHSA-8w4h-3cm3-2pm2
- Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx
- Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-wxhq-pm8v-cw75
- Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-rq8g-5pc5-wrhr
- Warn: Project is vulnerable to: GHSA-p28h-cc7q-c4fg
- Warn: Project is vulnerable to: GHSA-9vvw-cc9w-f27h
- Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-hr2v-3952-633q
- Warn: Project is vulnerable to: GHSA-r7jx-5m6m-cpg9
- Warn: Project is vulnerable to: GHSA-j4f2-536g-r55m
- Warn: Project is vulnerable to: GHSA-r7qp-cfhv-p84w
- Warn: Project is vulnerable to: GHSA-qrmc-fj45-qfc2
- Warn: Project is vulnerable to: GHSA-9qj9-36jm-prpv
- Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3
- Warn: Project is vulnerable to: MAL-2023-462
- Warn: Project is vulnerable to: GHSA-xf7w-r453-m56c
- Warn: Project is vulnerable to: GHSA-q42p-pg8m-cqh6
- Warn: Project is vulnerable to: GHSA-w457-6q6x-cgp9
- Warn: Project is vulnerable to: GHSA-62gr-4qp9-h98f
- Warn: Project is vulnerable to: GHSA-f52g-6jhx-586p
- Warn: Project is vulnerable to: GHSA-2cf5-4w76-r9qv
- Warn: Project is vulnerable to: GHSA-3cqr-58rm-57f8
- Warn: Project is vulnerable to: GHSA-g9r4-xpmj-mj65
- Warn: Project is vulnerable to: GHSA-q2c6-c6pm-g3gh
- Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44
- Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988
- Warn: Project is vulnerable to: GHSA-44pw-h2cw-w3vq
- Warn: Project is vulnerable to: GHSA-jp4x-w63m-7wgm
- Warn: Project is vulnerable to: GHSA-c429-5p7v-vgjp
- Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
- Warn: Project is vulnerable to: GHSA-pfq8-rq6v-vf5m
- Warn: Project is vulnerable to: GHSA-6x33-pw7p-hmpq
- Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
- Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr
- Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg
- Warn: Project is vulnerable to: GHSA-w7q9-p3jq-fmhm
- Warn: Project is vulnerable to: GHSA-xvf7-4v9q-58w6
- Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546
- Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp
- Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695
- Warn: Project is vulnerable to: GHSA-fvqr-27wr-82fm
- Warn: Project is vulnerable to: GHSA-4xc9-xhrj-v574
- Warn: Project is vulnerable to: GHSA-x5rq-j2xg-h7qm
- Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
- Warn: Project is vulnerable to: GHSA-pp57-mqmh-44h7
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-wrvr-8mpx-r7pp
- Warn: Project is vulnerable to: GHSA-hxm2-r34f-qmc5
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-fhjf-83wg-r2j9
- Warn: Project is vulnerable to: GHSA-w9mr-4mfr-499f
- Warn: Project is vulnerable to: GHSA-9v62-24cr-58cx
- Warn: Project is vulnerable to: GHSA-r8f7-9pfq-mjmv
- Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
- Warn: Project is vulnerable to: GHSA-cwx2-736x-mf6w
- Warn: Project is vulnerable to: GHSA-v39p-96qg-c8rf
- Warn: Project is vulnerable to: GHSA-8v63-cqqc-6r2c
- Warn: Project is vulnerable to: GHSA-6fx8-h7jm-663j
- Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
- Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-gqgv-6jq5-jjj9
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-6g33-f262-xjp4
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-7mwh-4pqv-wmr8
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-jv35-xqg7-f92r
- Warn: Project is vulnerable to: GHSA-4g88-fppr-53pp
- Warn: Project is vulnerable to: GHSA-4jqc-8m5r-9rpr
- Warn: Project is vulnerable to: GHSA-fxwf-4rqh-v8g3
- Warn: Project is vulnerable to: GHSA-25hc-qcg6-38wj
- Warn: Project is vulnerable to: GHSA-xfhh-g9f5-x4m4
- Warn: Project is vulnerable to: GHSA-qm95-pgcg-qqfq
- Warn: Project is vulnerable to: GHSA-cqmj-92xf-r6r9
- Warn: Project is vulnerable to: GHSA-2m39-62fm-q8r3
- Warn: Project is vulnerable to: GHSA-5mjw-6jrh-hvfq
- Warn: Project is vulnerable to: GHSA-x9hc-rw35-f44h
- Warn: Project is vulnerable to: GHSA-mf6x-7mm4-x2g7
- Warn: Project is vulnerable to: GHSA-j44m-qm6p-hp7m
- Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
- Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
- Warn: Project is vulnerable to: GHSA-662x-fhqg-9p8v
- Warn: Project is vulnerable to: GHSA-394c-5j6w-4xmx
- Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3
- Warn: Project is vulnerable to: GHSA-cf4h-3jhx-xvhq
- Warn: Project is vulnerable to: GHSA-v2p6-4mp7-3r9v
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
- Warn: Project is vulnerable to: GHSA-72mh-269x-7mh5
- Warn: Project is vulnerable to: GHSA-h4j5-c7cj-74xg
- Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
- Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp
Score
2.1
/10
Last Scanned on 2025-02-10
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn MoreOther packages similar to vue-image-crop-upload
vue-core-image-upload
2.4.14
a vue plgin for image upload and crop
@upload-io/vue-uploader
3.37.1
Vue File Upload UI Widget — Lightweight & supports: drag and drop, multiple uploads, image cropping, customization & more 🚀 Comes with Cloud Storage 🌐
imgpond
0.14.4
Image uploading one-stop solution.
vue-crop-upload
3.0.5
VueCropUpload is a Vue 3 component that provides image uploading functionality with built-in cropping capabilities. It allows users to select an image file, crop it, and upload it to a specified URL.