vue-img-inputer

点击查看中文文档 | Have a glance at Demo

Intro

• <input type="file" /> like, only support single image
• auto-upload support
• drop-select / preview / use as <img /> as well
• optional skins

Screenshots

Install and Usage

npm install vue-img-inputer

import ImgInputer from 'vue-img-inputer'
import 'vue-img-inputer/dist/index.css'
 
Vue.component('ImgInputer', ImgInputer)

<img-inputer v-model="file" theme="light" size="large"/>

API

Auto upload related

1. auto-upload: Boolean
   set to enable auto-upload

2. action: String
   request URL

3. upload-key: String
   default: file
   key name in form-data

4. extra-data: Object
   extra data been appended in request's form-data

5. headers: Object
   additional headers of request

6. with-cookie: Boolean
   whether cookies will been sent

7. on-start: Function
   params: func ( file )
   hook function when upload start

8. on-progress: Function
   params: func ( event, file )
   hook function when uploading, get progress by event.percent

9. on-success: Function
   params: func ( res, file )
   hook function when upload success, res is response from server

10. on-error: Function
    params: func ( err, file )
    hook function when upload failed

Input tag related

1. accept: String
   default: image/*,video/*;
   suggest to set a specific value like image/jpg,image/gif; for wildcard will lead to a serious delay

2. placeholder: String
   default: Drop file here or click

3. id: String
   default: random string in 4 length
   id of input tag

4. readonly: Boolean

5. capture: Boolean
   default: false
   whether use camera directly in mobile

6. max-size: Number
   default: 5120
   max-size of image (KB)

7. name: Boolean
   name of input tag

8. any input's attribute
   any input's original attributes set on component will be inherited by inner input tag

UI related

1. img-src: String
   image resource let component behavior like <img />

2. theme: String
   default: material two themes optional (light / material)

3. size: String small / normal / large

4. icon: String
   clip / img / img2

5. ali-icon: String
   if you use iconfont.cn, set unicode of any icon to custom

6. no-mask: Boolean
   remove mask when hover

7. no-hover-effect: Boolean
   remove all hover effect (include text) when hover

8. bottom-text: String
   default: Drop file here or click to change
   text in the bottom when hover

9. no-multiple-text: String
   default: Not support multiple files
   visible only the state is readonly, cover bottom-text

10. exceed-size-text: String
    default: The size of file should less than: ${maxSize}
    visible only the state is readonly, cover bottom-text

11. no-action-text: String
    default: Action hasn't set up yet
    visible only the state is readonly, cover bottom-text

12. readonly-tip-text: String
    default: Readonly
    visible only the state is readonly, cover bottom-text

Events

1. onChange: Function
   params: func ( file, fileName )
   hook function when file selected

2. onExceed: Function
   params: func ( file )
   hook function when file exceed max-size

Methods

1. reset
   reset componet but will not clear img-src