https://github.com/TerryZ/v-uploader

A Vue2 plugin make files upload simple and easier, single file upload with image preview, multiple upload with drag and drop
https://github.com/TerryZ/v-uploader

file-upload fine-uploader javascript multiple-files-upload uploader vue vuejs2

Last synced: 5 months ago
JSON representation

A Vue2 plugin make files upload simple and easier, single file upload with image preview, multiple upload with drag and drop

• Host: GitHub
• URL: https://github.com/TerryZ/v-uploader
• Owner: TerryZ
• License: mit
• Created: 2018-04-27T09:46:59.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2022-06-29T03:11:12.000Z (over 3 years ago)
• Last Synced: 2025-04-10T02:54:35.477Z (8 months ago)
• Topics: file-upload, fine-uploader, javascript, multiple-files-upload, uploader, vue, vuejs2
• Language: Vue
• Homepage: https://terryz.github.io/vue/#/upload
• Size: 749 KB
• Stars: 237
• Watchers: 8
• Forks: 50
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-vue - v-uploader - A Vue2 plugin make files upload simple and easier, single file upload with image preview, multiple upload with drag and drop ` 📝 a year ago` (UI Components [🔝](#readme))
• awesome-vue-zh - V-上传 - 一个Vue2插件,使文件上传简单方便,您可以拖动文件或选择对话框中的文件进行上传 (UI组件 / 形成)
• awesome-vue - v-uploader ★121 - A Vue2 plugin to make files upload simple and easier, you can drag files or select file in dialog to upload (UI Components / Form)
• awesome-vue - v-uploader - A Vue2 plugin to make files upload simple and easier, you can drag files or select file in dialog to upload (Components & Libraries / UI Components)
• awesome-vue - v-uploader - A Vue2 plugin to make files upload simple and easier, you can drag files or select file in dialog to upload (UI Components / Form)

README

          






v-uploader




  A Vue2 plugin make files upload simple and easier, 


  single file upload with image preview, multiple upload with drag and drop





  

  



  










## Examples and Documentation

Explorer on

- [English site](https://terryz.github.io/vue/#/upload)

- [国内站点](https://terryz.gitee.io/vue/#/upload)

## Plugin preview

Single file upload with image preview



Multiple files upload with drag and drop



## Installation

```

npm i v-uploader -S

```

Include and install plugin in your `main.js` file.

```js

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](https://github.com/TerryZ/v-dialogs)** plugin to display message for example

## Dependencies

- [fine-uploader](https://github.com/FineUploader/fine-uploader)

- [holderjs](https://github.com/imsky/holder)

## License

[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2FTerryZ%2Fv-uploader.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2FTerryZ%2Fv-uploader?ref=badge_large)