vue-simple-uploader-c [![NPM Version][npm-image]][npm-url] [![NPM Downloads][downloads-image]][downloads-url] [![juejin likes][juejin-image]](juejin-url)

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

Features

* Treat Folder and File as File
* Pause/Resume upload
* Recover upload
* Error handling
* Drag and Drop with folder reader
* Custom upload buttons
* Folder Upload
* Queue management
* File validation
* Upload progress
* Time remaining
* Chunk uploads

Install

``bash npm install vue-simple-uploader-c --save`

`Notes`

- https://www.cnblogs.com/xiahj/p/vue-simple-uploader.html - https://github.com/LuoLiangDSGA/spring-learning/tree/master/boot-uploader - http://www.smarthu.club

`Usage`

`$3`

`js 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')`

`$3`

`vue

`Components`

`$3`

Root component.

#### Props

* options {Object}

See simple-uploader.js options.

Besides, some other options are avaliable too:

- parseTimeRemaining(timeRemaining, parsedTimeRemaining) {Function}

this function option to format the current file's time remaining value(seconds, number), you can return your language time remaining text, params:

- timeRemaining{Number}, time remaining seconds

- parsedTimeRemaining{String}, default shown time remaining text, you can use it like this:

`js parseTimeRemaining: function (timeRemaining, parsedTimeRemaining) { return parsedTimeRemaining .replace(/\syears?/, '年') .replace(/\days?/, '天') .replace(/\shours?/, '小时') .replace(/\sminutes?/, '分钟') .replace(/\sseconds?/, '秒') }`-categoryMap {Object}

File category map, default:

`js { image: ['gif', 'jpg', 'jpeg', 'png', 'bmp', 'webp'], video: ['mp4', 'm3u8', 'rmvb', 'avi', 'swf', '3gp', 'mkv', 'flv'], audio: ['mp3', 'wav', 'wma', 'ogg', 'aac', 'flac'], document: ['doc', 'txt', 'docx', 'pages', 'epub', 'pdf', 'numbers', 'csv', 'xls', 'xlsx', 'keynote', 'ppt', 'pptx'] }`

* autoStart {Boolean}

Default true, Whether the file will be start uploading after it is added.

* fileStatusText {Object}

Default:`js { success: 'success', error: 'error', uploading: 'uploading', paused: 'paused', waiting: 'waiting' }`An object map for file status text.

After 0.6.0, fileStatusText can be a function with params (status, response = null), you can control the status text more flexible:

`js fileStatusText(status, response) { const statusTextMap = { uploading: 'uploading', paused: 'paused', waiting: 'waiting' } if (status === 'success' || status === 'error') { // only use response when status is success or error

// eg: // return response data ? return response.data } else { return statusTextMap[status] } }`

#### Events

See simple-uploader.js uploader/events

Note:

* All events name will be transformed by lodash.kebabCase, eg: fileSuccess will be transformed to file-success

* catchAll event will not be emited.

* file-added(file), file added event, this event is used for file validation. To reject this file you should set file.ignored = true.

* files-added(files, fileList), files added event, this event is used for files validation. To reject these files you should set files.ignored = true or fileList.ignored = true.

#### Scoped Slots

* files {Array}

An array of files (no folders).

* fileList {Array}

An array of files and folders.

* started

Started uploading or not.

#### Get Uploader instance

You can get it like this:

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

`$3`

Select files button.

#### Props

* directory {Boolean}

Default false, Support selecting Folder

* single {Boolean}

Default false, To prevent multiple file uploads if it is true.

* attrs {Object}

Default {}, Pass object to set custom attributes on input element.

`$3`

Droped files area.

`$3`

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

#### Scoped Slots

* fileList {Array}

An array of files and folders.

`$3`

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

#### Scoped Slots

* files {Array}

An array of files (no folders).

`$3`

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

`$3`

File item component.

#### Props

* file {Uploader.File}

Uploader.File instance.

* list {Boolean}

It should be true if it is puted in UploaderList

#### Scoped Slots

* file {Uploader.File}

Uploader.File instance.

* list {Boolean}

In UploaderList component or not.

* status {String}

Current status, the values is one of success, error, uploading, paused, waiting

* paused {Boolean}

Indicated if the file is paused.

* error {Boolean}

Indicated if the file has encountered an error.

* averageSpeed {Number}

Average upload speed, bytes per second.

* formatedAverageSpeed {String}

Formated average upload speed, eg: 3 KB / S

* currentSpeed {Number}

Current upload speed, bytes per second.

* isComplete {Boolean}

Indicated whether the file has completed uploading and received a server response.

* isUploading {Boolean}

Indicated whether file chunks is uploading.

* size {Number}

Size in bytes of the file.

* formatedSize {Number}

Formated file size, eg: 10 KB.

* uploadedSize {Number}

Size uploaded in bytes.

* progress {Number}

A number between 0 and 1 indicating the current upload progress of the file.

* progressStyle {String}

The file progress element's transform style, eg: {transform: '-50%'}.

* progressingClass {String}

The value will be uploader-file-progressing if the file is uploading.

* timeRemaining {Number}

Remaining time to finish upload file in seconds.

* formatedTimeRemaining {String}

Formated remaining time, eg: 3 miniutes.

* type {String}

File type.

* extension {String}

File extension in lowercase.

* fileCategory {String}

File category, one of folder, document, video, audio, image, unknown.

`Development`

`bash

`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

[npm-image]: https://img.shields.io/npm/v/vue-simple-uploader.svg?style=flat
[npm-url]: https://npmjs.org/package/vue-simple-uploader
[downloads-image]: https://img.shields.io/npm/dm/vue-simple-uploader.svg?style=flat
[downloads-url]: https://npmjs.org/package/vue-simple-uploader
[juejin-image]: https://badge.juejin.im/entry/599dad0ff265da248b04d7b8/likes.svg?style=flat
[juejin-url]: https://juejin.im/entry/599dad0ff265da248b04d7b8/detail

vue-simple-uploader-c [![NPM Version][npm-image]][npm-url] [![NPM Downloads][downloads-image]][downloads-url] [![juejin likes][juejin-image]](juejin-url)

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

!example

!QQ

中文

Features

Install

``bash npm install vue-simple-uploader-c --save`

`Notes`

- https://www.cnblogs.com/xiahj/p/vue-simple-uploader.html - https://github.com/LuoLiangDSGA/spring-learning/tree/master/boot-uploader - http://www.smarthu.club

`Usage`

`$3`

`js 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')`

`$3`

`vue

`Components`

`$3`

Root component.

#### Props

* options {Object}

See simple-uploader.js options.

Besides, some other options are avaliable too:

- parseTimeRemaining(timeRemaining, parsedTimeRemaining) {Function}

this function option to format the current file's time remaining value(seconds, number), you can return your language time remaining text, params:

- timeRemaining{Number}, time remaining seconds

- parsedTimeRemaining{String}, default shown time remaining text, you can use it like this:

File category map, default:

* autoStart {Boolean}

Default true, Whether the file will be start uploading after it is added.

* fileStatusText {Object}

Default:`js { success: 'success', error: 'error', uploading: 'uploading', paused: 'paused', waiting: 'waiting' }`An object map for file status text.

After 0.6.0, fileStatusText can be a function with params (status, response = null), you can control the status text more flexible:

// eg: // return response data ? return response.data } else { return statusTextMap[status] } }`

#### Events

See simple-uploader.js uploader/events

Note:

* All events name will be transformed by lodash.kebabCase, eg: fileSuccess will be transformed to file-success

* catchAll event will not be emited.

* file-added(file), file added event, this event is used for file validation. To reject this file you should set file.ignored = true.

* files-added(files, fileList), files added event, this event is used for files validation. To reject these files you should set files.ignored = true or fileList.ignored = true.

#### Scoped Slots

* files {Array}

An array of files (no folders).

* fileList {Array}

An array of files and folders.

* started

Started uploading or not.

#### Get Uploader instance

You can get it like this:

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

`$3`

Select files button.

#### Props

* directory {Boolean}

Default false, Support selecting Folder

* single {Boolean}

Default false, To prevent multiple file uploads if it is true.

* attrs {Object}

Default {}, Pass object to set custom attributes on input element.

`$3`

Droped files area.

`$3`

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

#### Scoped Slots

* fileList {Array}

An array of files and folders.

`$3`

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

#### Scoped Slots

* files {Array}

An array of files (no folders).

`$3`

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

`$3`

File item component.

#### Props

* file {Uploader.File}

Uploader.File instance.

* list {Boolean}

It should be true if it is puted in UploaderList

#### Scoped Slots

* file {Uploader.File}

Uploader.File instance.

* list {Boolean}

In UploaderList component or not.

* status {String}

Current status, the values is one of success, error, uploading, paused, waiting

* paused {Boolean}

Indicated if the file is paused.

* error {Boolean}

Indicated if the file has encountered an error.

* averageSpeed {Number}

Average upload speed, bytes per second.

* formatedAverageSpeed {String}

Formated average upload speed, eg: 3 KB / S

* currentSpeed {Number}

Current upload speed, bytes per second.

* isComplete {Boolean}

Indicated whether the file has completed uploading and received a server response.

* isUploading {Boolean}

Indicated whether file chunks is uploading.

* size {Number}

Size in bytes of the file.

* formatedSize {Number}

Formated file size, eg: 10 KB.

* uploadedSize {Number}

Size uploaded in bytes.

* progress {Number}

A number between 0 and 1 indicating the current upload progress of the file.

* progressStyle {String}

The file progress element's transform style, eg: {transform: '-50%'}.

* progressingClass {String}

The value will be uploader-file-progressing if the file is uploading.

* timeRemaining {Number}

Remaining time to finish upload file in seconds.

* formatedTimeRemaining {String}

Formated remaining time, eg: 3 miniutes.

* type {String}

File type.

* extension {String}

File extension in lowercase.

* fileCategory {String}

File category, one of folder, document, video, audio, image, unknown.

`Development`

`bash

`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