vue断点续传上传文件到oss

首先了解断点续传原理，其次对vue-simple-upload插件进行再度封装使用。这是一个待优化案例，不过是可以实现功能的。附上源码，仅供参考:

<template>
  <div class="uploader-demo">
    <!--文件回显-->
    <div class="show-file">
      <img v-if="pdfId"  @click="showPDF" src="../../../assets/images/pdf.png" alt="">
    </div>
    <uploader
      ref="uploader"
      :file-status-text="statusText"
      class="uploader-example"
      enctype="multipart/form-data"
      @upload-start="myOss"
      @file-removed="removeFile"
      @file-complete="fileComplete"
      @complete="complete"
      @file-success="fileSuccess">
      <uploader-drop>
        <uploader-btn :single="singleFile">上传</uploader-btn>
      </uploader-drop>
      <!--<span @click="downLoadFile">下载</span>-->
      <!--<span @click="delFile">删除</span>-->
    </uploader>
    <!--查看pdf-->
    <div
      v-if="isshowpdf"
      class="check-pdf-wrap"
      @click="hiddenPdf">
      <iframe
        :src="myPdfUrl"
        class="check-pdf"
        width="100%"
        scrolling="no">
        您的浏览器不支持框架
      </iframe>
    </div>
  </div>
</template>

<script>
import {$get, $post, $put} from '../../../javascript/utils/http';
export default {
  props:{
    index:Number,
    pdfId:String,
    dir:String,
    format:String
  },
  data() {
    return {
      fileFormat:this.format,
      ossDir:this.dir,
      mypdfId:this.pdfId,
      myPdfUrl:'',
      isshowpdf:'',
      myFileName: '',
      fileId: '',
      myFile: '',
      oss:{
        region: '',
        endpoint: '',
        accessKeyId: '',
        accessKeySecret: '',
        bucket: '',
        dir:''
      },
      fileText: '文件回显',
      statusText: {
        success: '成功',
        error: '失败',
        uploading: '上传中',
        paused: '暂停',
        waiting: '等待'
      },
      attrs: {
        accept: 'pd