\n\n \n\n## Intro\n\n- `` like, only support single image\n- auto-upload support\n- drop-select / preview / use as `` as well\n- optional skins\n\n \n\n## Screenshots\n\n
\n \n
\n\n \n\n## Install and Usage\n\n```bash\nnpm install vue-img-inputer\n```\n\n```javascript\nimport ImgInputer from 'vue-img-inputer'\nimport 'vue-img-inputer/dist/index.css'\n\nVue.component('ImgInputer', ImgInputer)\n```\n\n```html\n\n```\n\n \n\n## API\n\nAuto upload related\n \n\n1. **`auto-upload`**: Boolean \n set to enable auto-upload\n\n2. **`action`**: String \n request URL\n\n3. **`upload-key`**: String \n **default**: `file` \n key name in form-data\n\n4. **`extra-data`**: Object \n extra data been appended in request's form-data\n\n5. **`headers`**: Object \n additional headers of request\n\n6. **`with-cookie`**: Boolean \n whether cookies will been sent\n\n7. **`on-start`**: Function \n **params**: func ( file ) \n hook function when upload start\n\n8. **`on-progress`**: Function \n **params**: func ( event, file ) \n hook function when uploading, get progress by `event.percent`\n\n9. **`on-success`**: Function \n **params**: func ( res, file ) \n hook function when upload success, `res` is response from server\n\n10. **`on-error`**: Function \n **params**: func ( err, file ) \n hook function when upload failed\n\n \n\n\nInput tag related\n \n\n1. **`accept`**: String \n **default**: `image/*,video/*;` \n suggest to set a specific value like `image/jpg,image/gif;` for wildcard will lead to a serious delay\n\n2. **`placeholder`**: String \n **default**: `Drop file here or click`\n\n3. **`id`**: String \n **default**: random string in 4 length \n id of input tag\n\n4. **`readonly`**: Boolean\n\n5. **`capture`**: Boolean \n **default**: `false` \n whether use camera directly in mobile\n\n6. **`max-size`**: Number \n **default**: 5120 \n max-size of image (KB)\n\n7. **`name`**: Boolean \n name of input tag\n\n8. **`any input's attribute`** \n any input's original attributes set on component will be inherited by inner input tag\n\n \n\n\nUI related\n \n\n1. **`img-src`**: String \n image resource let component behavior like ``\n\n2. **`theme`**: String \n **default**: `material`\n two themes optional (light / material)\n\n3. **`size`**: String\n small / normal / large\n\n4. **`icon`**: String \n clip / img / img2\n\n5. **`ali-icon`**: String \n if you use [iconfont.cn](http://iconfont.cn/), set unicode of any icon to custom\n\n6. **`no-mask`**: Boolean \n remove mask when hover\n\n7. **`no-hover-effect`**: Boolean \n remove all hover effect (include text) when hover\n\n8. **`bottom-text`**: String \n **default**: `Drop file here or click to change` \n text in the bottom when hover\n\n9. **`no-multiple-text`**: String \n **default**: `Not support multiple files` \n visible only the state is `readonly`, cover bottom-text\n\n10. **`exceed-size-text`**: String \n **default**: `The size of file should less than: ${maxSize}` \n visible only the state is `readonly`, cover bottom-text\n\n11. **`no-action-text`**: String \n **default**: `Action hasn't set up yet` \n visible only the state is `readonly`, cover bottom-text\n\n12. **`readonly-tip-text`**: String \n **default**: `Readonly` \n visible only the state is `readonly`, cover bottom-text\n\n \n\n\nEvents\n \n\n1. **`onChange`**: Function \n **params**: func ( file, fileName ) \n hook function when file selected\n\n2. **`onExceed`**: Function \n **params**: func ( file ) \n hook function when file exceed max-size\n\n \n\n\nMethods\n \n\n1. **`reset`** \n reset componet but will not clear `img-src`\n\n \n\n","maintainers":[{"name":"waynecz","email":"451578533@qq.com"}],"time":{"modified":"2022-06-28T19:40:01.746Z","created":"2017-02-21T11:46:30.661Z","1.0.0":"2017-02-21T11:46:30.661Z","1.0.1":"2017-02-21T11:48:59.865Z","1.0.11":"2017-02-21T11:53:59.272Z","1.0.12":"2017-02-21T12:08:43.988Z","1.0.13":"2017-02-22T12:00:35.004Z","1.0.14":"2017-02-23T01:45:21.089Z","1.0.2":"2017-02-24T06:10:52.688Z","1.0.21":"2017-02-27T07:35:16.538Z","1.0.22":"2017-02-27T10:11:40.762Z","1.0.23":"2017-03-07T11:00:50.892Z","1.0.3":"2017-03-21T08:04:45.118Z","1.0.4":"2017-03-21T08:08:36.291Z","1.0.5":"2017-03-21T09:17:05.520Z","1.0.6":"2017-03-24T03:42:03.248Z","1.0.61":"2017-03-24T03:47:54.337Z","1.0.62":"2017-03-27T05:13:53.159Z","1.0.7":"2017-05-22T03:06:57.141Z","1.0.8":"2017-05-22T11:38:47.460Z","1.1.0":"2017-05-31T06:53:16.379Z","1.1.1":"2017-08-09T02:41:49.874Z","1.1.2":"2017-08-19T08:20:09.812Z","1.1.3":"2017-09-06T08:04:51.806Z","1.1.4":"2017-09-06T08:05:22.252Z","1.1.5":"2017-09-15T06:21:09.250Z","2.0.0":"2018-06-13T09:46:30.376Z","2.1.0":"2018-12-04T11:13:25.308Z","2.1.1":"2019-01-17T04:09:22.228Z","2.1.2":"2019-01-21T02:56:37.575Z","2.1.3":"2019-03-05T07:07:14.875Z","2.1.4":"2019-08-23T06:33:09.917Z","2.1.5":"2019-09-06T04:56:04.676Z","2.1.6":"2019-09-06T05:01:36.348Z"},"homepage":"https://github.com/waynecz/vue-img-inputer#readme","keywords":["file-input","image","vue","components","ui"],"repository":{"type":"git","url":"git+https://github.com/waynecz/vue-img-inputer.git"},"author":{"name":"waynecz","email":"451578533@qq.com"},"bugs":{"url":"https://github.com/waynecz/vue-img-inputer/issues"},"license":"MIT","readmeFilename":"README.md","users":{"waynecz":true}}
![\"vip\"](\"./src/assets/vip-logo.png\"){kind=logo}
\n![\"GitHub](\"https://img.shields.io/badge/release-v2.1.0-orange.svg?style=for-the-badge\"/){kind=icon}
\n ![\"poi\"](\"https://img.shields.io/badge/poi-10-green.svg?style=for-the-badge\"/){kind=icon}
\n ![\"Bili\"](\"https://img.shields.io/badge/bili-3-blue.svg?style=for-the-badge\"/){kind=icon}
\n![](\"./src/assets/screenshot.gif\"/)
\n