Demos and Documents

Explorer on

• English site
• 国内站点

Plugin preview

single file upload with image preview

multiple files upload with drag and drop

Vue plugin series

| Plugin | Status | Description | | :---------------- | :-- | :-- | | v-page | | A simple pagination bar, including length Menu, i18n support | | v-dialogs | | A simple and powerful dialog, including Modal, Alert, Mask and Toast modes | | v-tablegrid | | A simpler to use and practical datatable | | v-uploader | | A Vue2 plugin to make files upload simple and easier, you can drag files or select file in dialog to upload | | v-ztree | | A simple tree for Vue2, support single or multiple(check) select tree, and support server side data | | v-gallery | | A Vue2 plugin make browsing images in gallery | | v-region | | A simple region selector, provide Chinese administrative division data | | v-selectpage | | A powerful selector for Vue2, list or table view of pagination, use tags for multiple selection, i18n and server side resources supports | | v-suggest | | A Vue2 plugin for input suggestions by autocomplete | | v-playback | | A Vue2 plugin to make video play easier | | v-selectmenu | | A simple, easier and highly customized menu solution |

Install

npm i v-uploader --save

Include plugin in your main.js file.

import Vue from 'vue';
import vUploader from 'v-uploader';

/**
 * v-uploader plugin global config
 */
const uploaderConfig = {
    uploadFileUrl: 'http://xxx/upload',
    deleteFileUrl: 'http://xxx/delete',
    showMessage: (vue, message) => {
        //using v-dialogs to show message
        vue.$vDialog.alert(message, null, {messageType: 'error'});
    }
};

//install plugin with options
Vue.use(vUploader, uploaderConfig);

There is using v-dialogs to show message in example

Depend on

• fine-uploader
• holderjs