Vue.js 2 Image File Input Component

auto-upload: Boolean
set to enable auto-upload

action: String
request URL

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

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

headers: Object
additional headers of request

with-cookie: Boolean
whether cookies will been sent

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

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

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

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

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

placeholder: String
default: Drop file here or click

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

readonly: Boolean

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

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

name: Boolean
name of input tag

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

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

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

size: String small / normal / large

icon: String
clip / img / img2

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

no-mask: Boolean
remove mask when hover

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

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

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

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

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

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

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

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