Home

Awesome

vue-simple-uploader NPM Version NPM Downloads juejin likes

A Vue.js upload component powered by simple-uploader.js

With vue 3

example

QQ

中文

Features

Install

npm install vue-simple-uploader --save

Notes

Usage

init

import Vue from 'vue'
import uploader from 'vue-simple-uploader'
import App from './App.vue'

Vue.use(uploader)

/* eslint-disable no-new */
new Vue({
  render(createElement) {
    return createElement(App)
  }
}).$mount('#app')

App.vue

<template>
  <uploader :options="options" class="uploader-example">
    <uploader-unsupport></uploader-unsupport>
    <uploader-drop>
      <p>Drop files here to upload or</p>
      <uploader-btn>select files</uploader-btn>
      <uploader-btn :attrs="attrs">select images</uploader-btn>
      <uploader-btn :directory="true">select folder</uploader-btn>
    </uploader-drop>
    <uploader-list></uploader-list>
  </uploader>
</template>

<script>
  export default {
    data () {
      return {
        options: {
          // https://github.com/simple-uploader/Uploader/tree/develop/samples/Node.js
          target: '//localhost:3000/upload',
          testChunks: false
        },
        attrs: {
          accept: 'image/*'
        }
      }
    }
  }
</script>

<style>
  .uploader-example {
    width: 880px;
    padding: 15px;
    margin: 40px auto 0;
    font-size: 12px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .4);
  }
  .uploader-example .uploader-btn {
    margin-right: 4px;
  }
  .uploader-example .uploader-list {
    max-height: 440px;
    overflow: auto;
    overflow-x: hidden;
    overflow-y: auto;
  }
</style>

Components

Uploader

Root component.

Props

Events

See simple-uploader.js uploader/events

Note:

Scoped Slots

Get Uploader instance

You can get it like this:

const uploaderInstance = this.$refs.uploader.uploader
// now you can call all uploader methods
// https://github.com/simple-uploader/Uploader#methods
uploaderInstance.cancel()

UploaderBtn

Select files button.

Props

UploaderDrop

Droped files area.

UploaderList

An array of Uploader.File file(folder) objects added by the user, but it treated Folder as Uploader.File Object.

Scoped Slots

UploaderFiles

An array of Uploader.File file objects added by the user.

Scoped Slots

UploaderUnsupport

It will be shown if the current browser do not support HTML5 File API.

UploaderFile

File item component.

Props

Scoped Slots

Development

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report