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)
;el: '#app'components:'vue-core-image-upload': VueCoreImageUploaddata:src: 'http://img1.vued.vanthink.cn/vued0a233185b6027244f9d43e653227439a.png'methods:{if reserrcode == 0thissrc = 'http://img1.vued.vanthink.cn/vued751d13a9cb5376b89cb6719e86f591f3.png';};
NUXT
;;Vue;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 |
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 😄😄😄💐💐💐.