Vue.js 2 Image File Input Component

Vue.js 2 Image File Input Component

A vue.js 2 image file input component that features drag and drop, image upload preview and more.


vip


GitHub release poi Bili


点击查看中文文档 | 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

Github Repository

Tags: #VueJs