[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-8941":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":16,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":17,"rankGlobal":10,"rankLanguage":10,"license":10,"archived":18,"fork":18,"defaultBranch":19,"hasWiki":20,"hasPages":18,"topics":21,"createdAt":10,"pushedAt":10,"updatedAt":27,"readmeContent":28,"aiSummary":29,"trendingCount":16,"starSnapshotCount":16,"syncStatus":30,"lastSyncTime":31,"discoverSource":32},8941,"vue-core-image-upload","Vanthink-UED\u002Fvue-core-image-upload","Vanthink-UED","a vue plugin for image to crop and upload ","http:\u002F\u002Fvanthink-ued.github.io\u002Fvue-core-image-upload\u002Findex.html",null,"Vue",1344,204,35,132,0,19.94,false,"master",true,[22,23,24,25,26],"crop","upload","vue","vue-component","vue-plugin","2026-06-12 02:02:00","## Vue-Core-Image-Upload\n\n[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Fvue-core-image-upload.svg?maxAge=2592000)]()\n\n\na vue plugin for image upload and crop ( Support 📱 IE10+)\n\n[查看文档](http:\u002F\u002Fvanthink-ued.github.io\u002Fvue-core-image-upload\u002Findex.html#\u002Fcn\u002Fget-started)\n\n\n[English Document](http:\u002F\u002Fvanthink-ued.github.io\u002Fvue-core-image-upload\u002Findex.html#\u002Fen\u002Fhome)\n\nif you use vue.js(\u003C=2.0), you should go [here](https:\u002F\u002Fgithub.com\u002FVanthink-UED\u002Fvue-core-image-upload\u002Ftree\u002Fv1.x).Or select\n1.x.x version.\n\n\u003Cimg width=\"360\" src=\".\u002Fshots\u002Fvue-core-image-upload.png\" \u002F>\n\n\n### Install\n\n``` bash\nnpm i vue-core-image-upload --save\n```\n\nCode Example (ES6)\n``` html\n\u003Cvue-core-image-upload\n  :class=\"['btn', 'btn-primary']\"\n  :crop=\"false\"\n  @imageuploaded=\"imageuploaded\"\n  :data=\"data\"\n  :max-file-size=\"5242880\"\n  url=\"your server url\" >\n\u003C\u002Fvue-core-image-upload>\n```\n``` js\n\n\nimport VueCoreImageUpload  from 'vue-core-image-upload';\n\nnew Vue({\n  el: '#app',\n  components: {\n    'vue-core-image-upload': VueCoreImageUpload\n  },\n  data: {\n    src: 'http:\u002F\u002Fimg1.vued.vanthink.cn\u002Fvued0a233185b6027244f9d43e653227439a.png',\n  },\n  methods: {\n     imageuploaded(res) {\n      if (res.errcode == 0) {\n        this.src = 'http:\u002F\u002Fimg1.vued.vanthink.cn\u002Fvued751d13a9cb5376b89cb6719e86f591f3.png';\n      }\n    }\n  }\n});\n```\nNUXT\n``` js\nimport Vue from 'vue';\nimport VueCoreImageUpload from 'vue-core-image-upload\u002Fdist\u002Fssr';\n\nVue.use( VueCoreImageUpload );\n\nplugins: [\n  { src: '~plugins\u002Fvue-core-image-upload.js', ssr: false }\n]\n```\n\n[Demo](http:\u002F\u002Fvanthink-ued.github.io\u002Fvue-core-image-upload\u002Findex.html)\n\n### Props\n\u003Ctable class=\"m-table bordered\">\n  \u003Cthead>\n    \u003Ctr>\n      \u003Cth>Props\u003C\u002Fth>\n      \u003Cth align=\"left\">Data Type\u003C\u002Fth>\n      \u003Cth>Example\u003C\u002Fth>\n      \u003Cth>Details\u003C\u002Fth>\n    \u003C\u002Ftr>\n  \u003C\u002Fthead>\n  \u003Ctbody>\n    \u003Ctr>\n      \u003Ctd>url\u003C\u002Ftd>\n      \u003Ctd align=\"left\">String\u003C\u002Ftd>\n      \u003Ctd>'\u002Fcrop.php'\u003C\u002Ftd>\n      \u003Ctd>Your server api\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>text\u003C\u002Ftd>\n      \u003Ctd align=\"left\">String\u003C\u002Ftd>\n      \u003Ctd>'Upload Image'\u003C\u002Ftd>\n      \u003Ctd>The text of your uploading button\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>inputOfFile\u003C\u002Ftd>\n      \u003Ctd align=\"left\">String    \u003C\u002Ftd>\n      \u003Ctd>  'file'\u003C\u002Ftd>\n      \u003Ctd>Yout input[file] name\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>extensions\u003C\u002Ftd>\n      \u003Ctd align=\"left\">String\u003C\u002Ftd>\n      \u003Ctd>'png,jpg,gif'\u003C\u002Ftd>\n      \u003Ctd>Limit the image type\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>crop\u003C\u002Ftd>\n      \u003Ctd align=\"left\">Boolean\u003C\u002Ftd>\n      \u003Ctd>'server'\u003C\u002Ftd>\n      \u003Ctd>Crop image option\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>cropRatio\u003C\u002Ftd>\n      \u003Ctd align=\"left\">String\u003C\u002Ftd>\n      \u003Ctd>'1:1'\u003C\u002Ftd>\n      \u003Ctd>The cropped image shape\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>cropBtn\u003C\u002Ftd>\n      \u003Ctd align=\"left\">Object\u003C\u002Ftd>\n      \u003Ctd>{ok:'Save','cancel':'Give Up'}\u003C\u002Ftd>\n      \u003Ctd>The Text of cropping button text\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>maxFileSize\u003C\u002Ftd>\n      \u003Ctd align=\"left\">Number\u003C\u002Ftd>\n      \u003Ctd>10485760(10M)\u003C\u002Ftd>\n      \u003Ctd>Limit the size of the file\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>maxFileSize\u003C\u002Ftd>\n      \u003Ctd align=\"left\">Number\u003C\u002Ftd>\n      \u003Ctd>10485760(10M)\u003C\u002Ftd>\n      \u003Ctd>Limit the size of the file\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>multipleSize\u003C\u002Ftd>\n      \u003Ctd align=\"left\">Number\u003C\u002Ftd>\n      \u003Ctd>5\u003C\u002Ftd>\n      \u003Ctd>Limit the count of the file\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>maxWidth\u003C\u002Ftd>\n      \u003Ctd align=\"left\">Number\u003C\u002Ftd>\n      \u003Ctd>150\u003C\u002Ftd>\n      \u003Ctd>The maximum width of cropped image \u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>maxheight\u003C\u002Ftd>\n      \u003Ctd align=\"left\">Number\u003C\u002Ftd>\n      \u003Ctd>150\u003C\u002Ftd>\n      \u003Ctd>限制图片的最大高度\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>inputAccept\u003C\u002Ftd>\n      \u003Ctd align=\"left\">string\u003C\u002Ftd>\n      \u003Ctd>'image\u002F*' \u002F 'image\u002Fjpg,image\u002Fjpeg,image\u002Fpng'\u003C\u002Ftd>\n      \u003Ctd>the input[file] accept\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>compress\u003C\u002Ftd>\n      \u003Ctd align=\"left\">Number\u003C\u002Ftd>\n      \u003Ctd>50\u003C\u002Ftd>\n      \u003Ctd>Set the quality of compressed image\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>isXhr\u003C\u002Ftd>\n      \u003Ctd align=\"left\">Boolean\u003C\u002Ftd>\n      \u003Ctd>true\u003C\u002Ftd>\n      \u003Ctd>IF cancel ajax uploading\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>headers\u003C\u002Ftd>\n      \u003Ctd align=\"left\">Object\u003C\u002Ftd>\n      \u003Ctd>{auth: xxxxx}\u003C\u002Ftd>\n      \u003Ctd>Set customed header when ajax uploading\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>data\u003C\u002Ftd>\n      \u003Ctd align=\"left\">Object\u003C\u002Ftd>\n      \u003Ctd>{auth: xxxxx}\u003C\u002Ftd>\n      \u003Ctd>Set customed data when ajax posting server\u003C\u002Ftd>\n    \u003C\u002Ftr>\n  \u003C\u002Ftbody>\n\u003C\u002Ftable>\n\n### Contributions\n\nYour contributions and suggestions are welcome 😄😄😄💐💐💐.\n","Vue-Core-Image-Upload 是一个基于 Vue.js 的插件，用于图片裁剪和上传。其核心功能包括支持自定义裁剪比例、限制文件类型及大小，并且能够与后端服务器无缝对接进行文件传输。该插件还特别优化了对移动端的支持，兼容IE10及以上版本浏览器。适用于需要在网页应用中实现用户友好的图片处理功能的场景，如个人资料头像上传、产品图片管理等。通过简单的配置即可快速集成到现有项目中，提高开发效率。",2,"2026-06-11 03:20:24","top_language"]