{"id":15132920,"url":"https://github.com/vanthink-ued/vue-core-image-upload","last_synced_at":"2025-05-15T16:06:34.884Z","repository":{"id":56567351,"uuid":"67475809","full_name":"Vanthink-UED/vue-core-image-upload","owner":"Vanthink-UED","description":"a vue plugin for image to crop and upload ","archived":false,"fork":false,"pushed_at":"2024-08-27T20:40:45.000Z","size":2470,"stargazers_count":1353,"open_issues_count":141,"forks_count":207,"subscribers_count":37,"default_branch":"master","last_synced_at":"2025-04-11T21:13:01.350Z","etag":null,"topics":["crop","upload","vue","vue-component","vue-plugin"],"latest_commit_sha":null,"homepage":"http://vanthink-ued.github.io/vue-core-image-upload/index.html","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Vanthink-UED.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-09-06T05:19:37.000Z","updated_at":"2025-02-16T06:50:39.000Z","dependencies_parsed_at":"2022-08-15T21:01:04.921Z","dependency_job_id":"dc3e0d55-c9df-41d3-9add-e6079036ba2c","html_url":"https://github.com/Vanthink-UED/vue-core-image-upload","commit_stats":{"total_commits":138,"total_committers":17,"mean_commits":8.117647058823529,"dds":0.2246376811594203,"last_synced_commit":"d6016a48098412c4212e964104b97008a0a33b76"},"previous_names":["vanthink-ued/vue.core.image.upload"],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Vanthink-UED%2Fvue-core-image-upload","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Vanthink-UED%2Fvue-core-image-upload/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Vanthink-UED%2Fvue-core-image-upload/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Vanthink-UED%2Fvue-core-image-upload/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Vanthink-UED","download_url":"https://codeload.github.com/Vanthink-UED/vue-core-image-upload/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248480430,"owners_count":21110937,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["crop","upload","vue","vue-component","vue-plugin"],"created_at":"2024-09-26T04:41:43.902Z","updated_at":"2025-04-11T21:13:05.704Z","avatar_url":"https://github.com/Vanthink-UED.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Vue-Core-Image-Upload\n\n[![npm](https://img.shields.io/npm/v/vue-core-image-upload.svg?maxAge=2592000)]()\n\n\na vue plugin for image upload and crop ( Support 📱 IE10+)\n\n[查看文档](http://vanthink-ued.github.io/vue-core-image-upload/index.html#/cn/get-started)\n\n\n[English Document](http://vanthink-ued.github.io/vue-core-image-upload/index.html#/en/home)\n\nif you use vue.js(\u003c=2.0), you should go [here](https://github.com/Vanthink-UED/vue-core-image-upload/tree/v1.x).Or select\n1.x.x version.\n\n\u003cimg width=\"360\" src=\"./shots/vue-core-image-upload.png\" /\u003e\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\" \u003e\n\u003c/vue-core-image-upload\u003e\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://img1.vued.vanthink.cn/vued0a233185b6027244f9d43e653227439a.png',\n  },\n  methods: {\n     imageuploaded(res) {\n      if (res.errcode == 0) {\n        this.src = 'http://img1.vued.vanthink.cn/vued751d13a9cb5376b89cb6719e86f591f3.png';\n      }\n    }\n  }\n});\n```\nNUXT\n``` js\nimport Vue from 'vue';\nimport VueCoreImageUpload from 'vue-core-image-upload/dist/ssr';\n\nVue.use( VueCoreImageUpload );\n\nplugins: [\n  { src: '~plugins/vue-core-image-upload.js', ssr: false }\n]\n```\n\n[Demo](http://vanthink-ued.github.io/vue-core-image-upload/index.html)\n\n### Props\n\u003ctable class=\"m-table bordered\"\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth\u003eProps\u003c/th\u003e\n      \u003cth align=\"left\"\u003eData Type\u003c/th\u003e\n      \u003cth\u003eExample\u003c/th\u003e\n      \u003cth\u003eDetails\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eurl\u003c/td\u003e\n      \u003ctd align=\"left\"\u003eString\u003c/td\u003e\n      \u003ctd\u003e'/crop.php'\u003c/td\u003e\n      \u003ctd\u003eYour server api\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003etext\u003c/td\u003e\n      \u003ctd align=\"left\"\u003eString\u003c/td\u003e\n      \u003ctd\u003e'Upload Image'\u003c/td\u003e\n      \u003ctd\u003eThe text of your uploading button\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003einputOfFile\u003c/td\u003e\n      \u003ctd align=\"left\"\u003eString \u0026nbsp; \u0026nbsp;\u003c/td\u003e\n      \u003ctd\u003e\u0026nbsp; 'file'\u003c/td\u003e\n      \u003ctd\u003eYout input[file] name\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eextensions\u003c/td\u003e\n      \u003ctd align=\"left\"\u003eString\u003c/td\u003e\n      \u003ctd\u003e'png,jpg,gif'\u003c/td\u003e\n      \u003ctd\u003eLimit the image type\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003ecrop\u003c/td\u003e\n      \u003ctd align=\"left\"\u003eBoolean\u003c/td\u003e\n      \u003ctd\u003e'server'\u003c/td\u003e\n      \u003ctd\u003eCrop image option\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003ecropRatio\u003c/td\u003e\n      \u003ctd align=\"left\"\u003eString\u003c/td\u003e\n      \u003ctd\u003e'1:1'\u003c/td\u003e\n      \u003ctd\u003eThe cropped image shape\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003ecropBtn\u003c/td\u003e\n      \u003ctd align=\"left\"\u003eObject\u003c/td\u003e\n      \u003ctd\u003e{ok:'Save','cancel':'Give Up'}\u003c/td\u003e\n      \u003ctd\u003eThe Text of cropping button text\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003emaxFileSize\u003c/td\u003e\n      \u003ctd align=\"left\"\u003eNumber\u003c/td\u003e\n      \u003ctd\u003e10485760(10M)\u003c/td\u003e\n      \u003ctd\u003eLimit the size of the file\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003emaxFileSize\u003c/td\u003e\n      \u003ctd align=\"left\"\u003eNumber\u003c/td\u003e\n      \u003ctd\u003e10485760(10M)\u003c/td\u003e\n      \u003ctd\u003eLimit the size of the file\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003emultipleSize\u003c/td\u003e\n      \u003ctd align=\"left\"\u003eNumber\u003c/td\u003e\n      \u003ctd\u003e5\u003c/td\u003e\n      \u003ctd\u003eLimit the count of the file\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003emaxWidth\u003c/td\u003e\n      \u003ctd align=\"left\"\u003eNumber\u003c/td\u003e\n      \u003ctd\u003e150\u003c/td\u003e\n      \u003ctd\u003eThe maximum width of cropped image \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003emaxheight\u003c/td\u003e\n      \u003ctd align=\"left\"\u003eNumber\u003c/td\u003e\n      \u003ctd\u003e150\u003c/td\u003e\n      \u003ctd\u003e限制图片的最大高度\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003einputAccept\u003c/td\u003e\n      \u003ctd align=\"left\"\u003estring\u003c/td\u003e\n      \u003ctd\u003e'image/*' / 'image/jpg,image/jpeg,image/png'\u003c/td\u003e\n      \u003ctd\u003ethe input[file] accept\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003ecompress\u003c/td\u003e\n      \u003ctd align=\"left\"\u003eNumber\u003c/td\u003e\n      \u003ctd\u003e50\u003c/td\u003e\n      \u003ctd\u003eSet the quality of compressed image\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eisXhr\u003c/td\u003e\n      \u003ctd align=\"left\"\u003eBoolean\u003c/td\u003e\n      \u003ctd\u003etrue\u003c/td\u003e\n      \u003ctd\u003eIF cancel ajax uploading\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eheaders\u003c/td\u003e\n      \u003ctd align=\"left\"\u003eObject\u003c/td\u003e\n      \u003ctd\u003e{auth: xxxxx}\u003c/td\u003e\n      \u003ctd\u003eSet customed header when ajax uploading\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003edata\u003c/td\u003e\n      \u003ctd align=\"left\"\u003eObject\u003c/td\u003e\n      \u003ctd\u003e{auth: xxxxx}\u003c/td\u003e\n      \u003ctd\u003eSet customed data when ajax posting server\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n### Contributions\n\nYour contributions and suggestions are welcome 😄😄😄💐💐💐.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvanthink-ued%2Fvue-core-image-upload","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvanthink-ued%2Fvue-core-image-upload","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvanthink-ued%2Fvue-core-image-upload/lists"}