vue-upload-multiple-image
A simple upload multiple image component for Vuejs NPM Package
Development (NPM / Yarn)
npm run dev
yarn dev
Install
NPM / Yarn
Install the package:
npm install vue-upload-multiple-image
yarn add vue-upload-multiple-image
Then import it in your project
main.js
Vue
components: VueUploadMultipleImage
Browser global
Usage
You can simply view App.vue to see how to use vue-upload-multiple-image
How to use:
images
has the structure:
path: 'http://example.com/image.jpg' default: 1 highlight: 1 caption: 'caption to display. receive' // Optional
Example
Options
Props
name | type | default | description |
---|---|---|---|
idUpload | String | image-upload | Id of input upload |
idEdit | String | image-edit | Id of input edit |
dragText | String | Kéo hình ảnh(nhiều) | Drag Text |
browseText | String | (hoặc) Chọn | Browse Text |
primaryText | String | Mặc định | Primary Text |
markIsPrimaryText | String | Đặt làm mặc định | Set default image |
popupText | String | Hình ảnh này sẽ được hiển thị làm mặc định | Description default image |
dropText | String | Thả tệp của bạn ở đây ... | Drag and drop |
accept | String | image/gif,image/jpeg,image/png,image/bmp,image/jpg | Accept |
dataImages | Array | [] | Array images |
multiple | Boolean | true | Set upload multiple image |
showPrimary | Boolean | true | Show text default image |
maxImage | Number | 5 | Maximum upload image |
showEdit | Boolean | true | Show action edit |
showDelete | Boolean | true | Show action delete |
showAdd | Boolean | true | Show action add |
disabled | Boolean | false | Disable upload image |
Events
name | arguments | description |
---|---|---|
upload-success | (formData, index, fileList) | Upload image succcess |
edit-image | (formData, index, fileList) | Edit image succcess |
before-remove | (index, done, fileList) | Before delete image |
mark-is-primary | (index, fileList) | Set default image |
limit-exceeded | amount | Limit exceeded images when drop |