Home

Awesome

<br><br>

<p align="center"><img src="https://terryz.gitee.io/image/v-uploader/v-uploader-single.png" alt="v-uploader"></p> <h3 align="center">v-uploader</h3> <p align="center"> A <strong>Vue2</strong> plugin make files upload simple and easier, <br> single file upload with image preview, multiple upload with drag and drop </p> <p align="center"> <a href="https://www.npmjs.com/package/v-uploader"><img src="https://img.shields.io/npm/v/v-uploader.svg"></a> <a href="https://mit-license.org/"><img src="https://img.shields.io/badge/license-MIT-brightgreen.svg"></a> <a href="https://app.fossa.io/projects/git%2Bgithub.com%2FTerryZ%2Fv-uploader?ref=badge_shield" alt="FOSSA Status"><img src="https://app.fossa.io/api/projects/git%2Bgithub.com%2FTerryZ%2Fv-uploader.svg?type=shield"/></a> <a href="https://www.npmjs.com/package/v-uploader"><img src="https://img.shields.io/npm/dy/v-uploader.svg"></a> </p>

<br><br><br><br><br>

Examples and Documentation

Explorer on

Plugin preview

Single file upload with image preview

<p align="center"><img src="https://terryz.github.io/image/v-uploader/v-uploader-single.png" alt="v-uploader-single" ></p>

Multiple files upload with drag and drop

<p align="center"><img src="https://terryz.github.io/image/v-uploader/v-uploader-multiple.png" alt="v-uploader-multiple" ></p>

Installation

npm i v-uploader -S

Include and install plugin in your main.js file.

import Vue from 'vue'
import Uploader from 'v-uploader'
import { DialogAlert } from 'v-dialogs'

/**
 * v-uploader plugin global config
 */
const uploaderConfig = {
  uploadFileUrl: 'https://some-site/upload',
  deleteFileUrl: 'https://some-site/delete',
  showMessage: (vue, message) => {
    // using v-dialogs to display error message
    DialogAlert(message, { messageType: 'error' })
  }
}

// Globally install plugin with options
Vue.use(Uploader, uploaderConfig)

Use v-dialogs plugin to display message for example

Dependencies

License

FOSSA Status