npm

Need private packages and team management tools?Check out npm Orgs. »

vue-resumable

1.0.108 • Public • Published

vue-resumable

这是一个vue上传组件,它支持多线程、分块上传及异常重试

使用方法

与其他Vue插件一样,在项目目录安装插件

npm install vue-resumable

并在Vue入口文件 对插件进行注册

Vue.use(VueResumable)

之后可以在组件中使用该插件

参数
  • inputId: 注册input file的id
  • name: 注册input file的name
  • multiple: 是否可以多选
  • directory: 是否上传目录
  • headers: 自定义header
  • requestType: 上传方式,默认:'octet' 其他可选值:'formdata'
  • post-action: 上传文件接收请求地址
  • thread: 上传线程数,不开启分块上传时指同时上传的文件数,开启分块上传时之同时上传的块数
  • chunkSize: 分块大小,单位KB,默认为0,0为不开启分块上传
  • maxRetries: 最大重试次数,开启分块时,为单个分块尝试次数,不开启分块则为单个文件尝试次数
  • promptly: 是否对新增文件立即上传,默认:false
  • progress: 默认:true,是否对XHR绑定progress监听,如果使用CORS跨域上传,打开此功能浏览器会启动preflight(预检请求),预检会在CORS头返回前发起,会导致上传请求提前因同源策略而终止,需要服务端特殊处理或关闭此功能。
可选参数

以下参数用于随上传请求发出 目前不支持关闭

  • carryTypeName default: 'resumableType'
  • carryFileNameName default: 'resumableFilename'
  • carryRelativePathName default: 'resumableRelativePath'
  • carryChunkSizeName 'resumableChunkSize'
  • carryCurrentChunkSizeName 'resumableCurrentChunkSize'
  • carryTotalSizeName default: 'resumableTotalSize'
  • carryChunkIndexName default: 'resumableChunkNumber'
  • carryTotalChunksName default: 'resumableTotalChunks'
  • carryIdentifierName default: 'resumableIdentifier'
事件
  • change: 当用户选择文件后触发的事件
  • complete: 上传完成时触发,返回队列文件
方法
  • clear: 清除组件队列文件
  • selectFile: 通过ref选择组件后调用selectFile方法 选择文件(需要设置组件inputId)
  • upload: 手动调用开始上传
属性
  • files: 组件接收的文件,包括上传完成的与上传中、未上传的全部文件
    • file: 文件对象
    • name: 文件名称
    • size: 文件大小
    • type: 文件类型
    • relativePath
    • lastModified
    • lastModifiedDate
    • uploadPercent 文件上传进度
    • uploading: 文件上传状态 -1:上传失败 0:未上传 1:上传中 2:上传成功
    • url : 当文件类型为image时有此属性,用于预览
<template>
  <div id="app">
    <vue-resumable
      inputId="up1"
      name="up1-name"
      :multiple="true"
      :directory="false"
      post-action=""
      :promptly="false"
      :thread="3"
      @change="change"
      :data="uploadData"
      ref="resumable"
    ></vue-resumable>
    <div>
      <img v-for="img in imgList" :src="img.url" width="150">
    </div>
    <button @click="upload">upload</button>
  </div>
</template>

<script>
  export default {
    data: function () {
      return {
        imgList: [],
        uploadData: {memberId: 1}
      }
    },
    methods: {
      change: function () {
        console.log('change')
        let _self = this
        let resumable = this.$refs.resumable
        resumable.files.forEach(file => {
          if (file.url) {
            _self.imgList.push(file)
          }
        })
      },
      upload: function () {
        console.log('App upload')
        this.$refs.resumable.upload()
      }
    }
  }
</script>

install

npm i vue-resumable

Downloadsweekly downloads

27

version

1.0.108

license

Apache-2.0

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability