vue-simple-uploader分片上传

目录

前言

一、安装vue-simple-uploader

二、在app.vue中使用

支持的配置项（options里面的参数）

事件

---

前言

在vue上面使用vue-simple-uploader实现分片上传

Github地址：https://github.com/shady-xia/Blog/tree/master/vue-simple-uploader

---

一、安装vue-simple-uploader

npm install vue-simple-uploader --save

main.js初始化vue-simple-uploader

import uploader from 'vue-simple-uploader'

Vue.use(uploader)

二、在app.vue中使用

<template>
  <div>
    <div>
      <uploader
        :options="options"
        class="uploader-example"
        ref="uploader"
        style="width: 100%"
      >
        <uploader-unsupport></uploader-unsupport>
        <uploader-drop>
          <p>欢迎来到上传录音界面</p>
          <uploader-btn>选择视频</uploader-btn>
        </uploader-drop>
        <uploader-list></uploader-list>
      </uploader>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: {},
    };
  },
  mounted() {
    this.uploader();
  },
  methods: {
    // 分片上传
    uploader() {
      this.options = {
        target: "http://192.168.0.166:8081/st/fileUpload/chunkUpload",
        testChunks: false, //不校验
        chunkSize: "10240000",
        maxChunkRetries: 3, //最大自动失败重试上传次数
        checkChunkUploadedByResponse: function (chunk, message) {
          let objMessage = JSON.parse(message);
          if (objMessage.skipUpload) {
            return true;
          }
          return (objMessage.uploaded || []).indexOf(chunk.offset + 1) >= 0;
        },
        headers: {
          Authorization: sessionStorage.getItem("Authorization"),
        },
        query: {
          id: 1,//封面id
          type: 3,//类型状态
        },
        attrs: {
          accept: [".mp4"],
        },
      };
    },
  },
};
</script>

<style>
.uploader-example {
  width: 100%;
  padding: 15px;
  margin: 50px auto 0;
  font-size: 12px;
  box-shadow: 0 0 10px rgba(0, 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>

支持的配置项（options里面的参数）：

• target 目标上传 URL，可以是字符串也可以是函数，如果是函数的话，则会传入 Uploader.File 实例、当前块 Uploader.Chunk 以及是否是测试模式，默认值为 '/'。
• singleFile 单文件上传。覆盖式，如果选择了多个会把之前的取消掉。默认 false。
• chunkSize 分块时按照该值来分。最后一个上传块的大小是可能是大于等于1倍的这个值但是小于两倍的这个值大小，可见这个 Issue #51，默认 1*1024*1024。
• forceChunkSize 是否强制所有的块都是小于等于 chunkSize 的值。默认是 false。
• simultaneousUploads 并发上传数，默认 3。
• fileParameterName 上传文件时文件的参数名，默认 file。
• query 其他额外的参数，这个可以是一个对象或者是一个函数，如果是函数的话，则会传入 Uploader.File 实例、当前块 Uploader.Chunk以及是否是测试模式，默认为 {}。
• headers 额外的一些请求头，如果是函数的话，则会传入 Uploader.File 实例、当前块 Uploader.Chunk 以及是否是测试模式，默认 {}。
• withCredentials 标准的 CORS 请求是不会带上 cookie 的，如果想要带的话需要设置 withCredentials 为 true，默认 false。
• method 当上传的时候所使用的是方式，可选 multipart、octet，默认 multipart，参考 multipart vs octet。
• testMethod 测试的时候使用的 HTTP 方法，可以是字符串或者函数，如果是函数的话，则会传入 Uploader.File 实例、当前块 Uploader.Chunk，默认 GET。
• uploadMethod 真正上传的时候使用的 HTTP 方法，可以是字符串或者函数，如果是函数的话，则会传入 Uploader.File 实例、当前块 Uploader.Chunk，默认 POST。
• allowDuplicateUploads 如果说一个文件以及上传过了是否还允许再次上传。默认的话如果已经上传了，除非你移除了否则是不会再次重新上传的，所以也就是默认值为 false。
• prioritizeFirstAndLastChunk 对于文件而言是否高优先级发送第一个和最后一个块。一般用来发送到服务端，然后判断是否是合法文件；例如图片或者视频的 meta 数据一般放在文件第一部分，这样可以根据第一个块就能知道是否支持；默认 false。
• testChunks 是否测试每个块是否在服务端已经上传了，主要用来实现秒传、跨浏览器上传等，默认 true。
• preprocess 可选的函数，每个块在测试以及上传前会被调用，参数就是当前上传块实例 Uploader.Chunk，注意在这个函数中你需要调用当前上传块实例的 preprocessFinished 方法，默认 null。
• initFileFn 可选函数用于初始化文件对象，传入的参数就是 Uploader.File 实例。
• readFileFn 可选的函数用于原始文件的读取操作，传入的参数就是 Uploader.File 实例、文件类型、开始字节位置 startByte，结束字节位置 endByte、以及当前块 Uploader.Chunk 实例。并且当完成后应该调用当前块实例的readFinished 方法，且带参数-已读取的 bytes。
• checkChunkUploadedByResponse 可选的函数用于根据 XHR 响应内容检测每个块是否上传成功了，传入的参数是：Uploader.Chunk 实例以及请求响应信息。这样就没必要上传（测试）所有的块了，具体细节原因参考 Issue #1，使用示例.
• generateUniqueIdentifier 可覆盖默认的生成文件唯一标示的函数，默认 null。
• maxChunkRetries 最大自动失败重试上传次数，值可以是任意正整数，如果是 undefined 则代表无限次，默认 0。
• chunkRetryInterval 重试间隔，值可以是任意正整数，如果是 null 则代表立即重试，默认 null。
• progressCallbacksInterval 进度回调间隔，默认是 500。
• speedSmoothingFactor 主要用于计算平均速度，值就是从 0 到 1，如果是 1 那么上传的平均速度就等于当前上传速度，如果说长时间上传的话，建议设置为 0.02，这样剩余时间预估会更精确，这个参数是需要和 progressCallbacksInterval 一起调整的，默认是 0.1。
• successStatuses 认为响应式成功的响应码，默认 [200, 201, 202]。
• permanentErrors 认为是出错的响应码，默认 [404, 415, 500, 501]。
• initialPaused 初始文件 paused 状态，默认 false。
• processResponse 处理请求结果，默认 function (response, cb) { cb(null, response) }。 0.5.2版本后，processResponse 会传入更多参数：(response, cb, Uploader.File, Uploader.Chunk)。
• processParams 处理请求参数，默认 function (params) {return params}，一般用于修改参数名字或者删除参数。0.5.2版本后，processParams 会有更多参数：(params, Uploader.File, Uploader.Chunk, isTest)

事件：

• @change(event) input 的 change 事件。
• @dragover(event) 拖拽区域的 dragover 事件。
• @dragenter(event) 拖拽区域的 dragenter 事件。
• @dragleave(event) 拖拽区域的 dragleave 事件。
• @fileSuccess(rootFile, file, message, chunk) 一个文件上传成功事件，第一个参数 rootFile 就是成功上传的文件所属的根 Uploader.File 对象，它应该包含或者等于成功上传文件；第二个参数 file 就是当前成功的 Uploader.File 对象本身；第三个参数就是 message 就是服务端响应内容，永远都是字符串；第四个参数 chunk 就是 Uploader.Chunk 实例，它就是该文件的最后一个块实例，如果你想得到请求响应码的话，chunk.xhr.status 就是。
• @fileComplete(rootFile) 一个根文件（文件夹）成功上传完成。
• @fileProgress(rootFile, file, chunk) 一个文件在上传中。
• @fileAdded(file, event) 这个事件一般用作文件校验，如果说返回了 false，那么这个文件就会被忽略，不会添加到文件上传列表中。
• @filesAdded(files, fileList, event) 和 fileAdded 一样，但是一般用作多个文件的校验。
• @filesSubmitted(files, fileList, event) 和 filesAdded 类似，但是是文件已经加入到上传列表中，一般用来开始整个的上传。
• @fileRemoved(file) 一个文件（文件夹）被移除。
• @fileRetry(rootFile, file, chunk) 文件重试上传事件。
• @fileError(rootFile, file, message, chunk) 上传过程中出错了。
• @uploadStart() 已经开始上传了。
• @complete() 上传完毕。
• @catchAll(event, ...) 所有的事件。