由simple-uploader.js驱动的Vue.js上传组件

Vue简单上传器 (vue-simple-uploader)

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

由simple-uploader.js驱动的Vue.js上传组件。

特征 (Features)

• Treat Folder and File as File

  将文件夹和文件视为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)

npm install vue-simple-uploader --save

用法 (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)

• options {Object}

  options {Object}

  See simple-uploader.js options.

  请参阅simple-uploader.js选项 。

• autoStart {Boolean}

  autoStart {Boolean}

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

  默认true ，添加文件后是否将开始上传。

大事记 (Events)

See simple-uploader.js uploader/events

请参阅simple-uploader.js上传器/事件

Note:

注意：

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

  所有事件名称将由lodash.kebabCase转换，例如： fileSuccess将转换为file-success

• catchAll event will not be emited.

  catchAll事件将不会catchAll 。

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

  file-added(file) ，文件添加事件，此事件用于文件验证。 要拒绝此文件，您应该设置file.ignored = true 。

范围插槽 (Scoped Slots)

• files {Array}

  files {Array}

  An array of files (no folders).

  文件数组(无文件夹)。

• fileList {Array}

  fileList {Array}

  An array of files and folders.

  文件和文件夹的数组。

• started

  started

  Started uploading or not.

  是否开始上传。

获取Uploader实例 (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 (UploaderBtn)

Select files button.

选择文件按钮。

道具 (Props)

• directory {Boolean}

  directory {Boolean}

  Default false, Support selecting Folder

  默认为false ，支持选择文件夹

• single {Boolean}

  single {Boolean}

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

  默认false ，如果为true ，则防止上传多个文件。

• attrs {Object}

  attrs {Object}

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

  默认{} ，传递对象以在输入元素上设置自定义属性。

UploaderDrop (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.

用户添加的Uploader.File文件(文件夹)对象数组，但将Folder视为Uploader.File对象。

范围插槽 (Scoped Slots)

• fileList {Array}

  fileList {Array}

  An array of files and folders.

  文件和文件夹的数组。

上传文件 (UploaderFiles)

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

用户添加的Uploader.File文件对象数组。

范围插槽 (Scoped Slots)

• files {Array}

  files {Array}

  An array of files (no folders).

  文件数组(无文件夹)。

Uploader不支持 (UploaderUnsupport)

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

如果当前浏览器不支持HTML5 File API，将显示该信息。

上传文件 (UploaderFile)

File item component.

文件项组件。

道具 (Props)

• file {Uploader.File}

  file {Uploader.File}

  Uploader.File instance.

  Uploader.File实例。

• list {Boolean}

  list {Boolean}

  It should be true if it is puted in UploaderList

  如果将其放在UploaderList ，则应为true

范围插槽 (Scoped Slots)

• file {Uploader.File}

  file {Uploader.File}

  Uploader.File instance.

  Uploader.File实例。

• list {Boolean}

  list {Boolean}

  In UploaderList component or not.

  是否在UploaderList组件中。

• status {String}

  status {String}

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

  当前状态，值是success ， error ， uploading ， paused ， waiting

• name {String}

  name {String}

  File name.

  文档名称。

• paused {Boolean}

  paused {Boolean}

  Indicated if the file is paused.

  指示文件是否暂停。

• error {Boolean}

  error {Boolean}

  Indicated if the file has encountered an error.

  指示文件是否遇到错误。

• averageSpeed {Number}

  averageSpeed {Number}

  Average upload speed, bytes per second.

  平均上传速度，每秒字节数。

• formatedAverageSpeed {String}

  formatedAverageSpeed {String}

  Formated average upload speed, eg: 3 KB / S

  格式化的平均上传速度，例如： 3 KB / S

• currentSpeed {Number}

  currentSpeed {Number}

  Current upload speed, bytes per second.

  当前的上传速度，每秒字节数。

• isComplete {Boolean}

  isComplete {Boolean}

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

  指示文件是否已完成上传并收到服务器响应。

• isUploading {Boolean}

  isUploading {Boolean}

  Indicated whether file chunks is uploading.

  指示文件块是否正在上传。

• size {Number}

  size {Number}

  Size in bytes of the file.

  文件的大小(以字节为单位)。

• formatedSize {Number}

  formatedSize {Number}

  Formated file size, eg: 10 KB.

  格式化的文件大小，例如： 10 KB 。

• uploadedSize {Number}

  uploadedSize {Number}

  Size uploaded in bytes.

  大小以字节为单位上传。

• progress {Number}

  progress {Number}

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

  0到1之间的数字表示文件的当前上传进度。

• progressStyle {String}

  progressStyle {String}

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

  文件进度元素的变换样式，例如： {transform: '-50%'} 。

• progressingClass {String}

  progressingClass {String}

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

  如果文件正在上传，则该值将为uploader-file-progressing 。

• timeRemaining {Number}

  timeRemaining {Number}

  Remaining time to finish upload file in seconds.

  完成上传文件的剩余时间(以秒为单位)。

• formatedTimeRemaining {String}

  formatedTimeRemaining {String}

  Formated remaining time, eg: 3 miniutes.

  格式化剩余时间，例如： 3 miniutes 。

• type {String}

  type {String}

  File type.

  文件类型。

• extension {String}

  extension {String}

  File extension in lowercase.

  小写的文件扩展名。

• fileCategory {String}

  fileCategory {String}

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

  文件类别， folder ， document ， video ， audio ， image ， unknown 。

发展历程 (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

翻译自: https://vuejsexamples.com/a-vue-js-upload-component-powered-by-simple-uploader-js/