前端OSS分片上传（vue版）

使用vue前端大文件直传OSS、使用分片上传

<template>
  <div class="big-file-upload">
    <div class="el-upload el-upload--text">
      <div class="el-upload-dragger" :class="isDrag?'is-dragover':''" @click.stop="onUploadFile">
        <div class="el-upload__text">
          <i class="el-icon-upload" />将文件拖到此处，或<em>点击选择文件</em>
        </div>
        <input ref="file" type="file" name="file" multiple="multiple" class="el-upload__input" @change="onFileChange">
      </div>
    </div>
    <!-- 文件上传table -->
    <vxe-grid
      ref="bigFileUploadTable"
      class="big-file-upload-tab"
      :data="fileList"
      size="small"
      border="inner"
      show-overflow="title"
      highlight-hover-row
      highlight-current-row
    >
      <vxe-table-column align="center" type="seq" width="30" fixed="left" />
      <vxe-table-column :show-overflow="false" field="name" title="文件名" align="left" width="200">
        <template slot-scope="scope">
          <div v-if="scope.row.isEditFileName">
            <el-input v-model="scope.row.fileName" size="mini">
              <el-button slot="append" icon="el-icon-finished" @click.stop="onChangeFileName(scope)" />
            </el-input>
          </div>
          <div v-else>
            <a :title="scope.row.fileName" class="file-name" @click.stop="onPreviewFile(scope.row)">{
  { scope.row.fileName }}</a>
            <i style="display: inline-block;vertical-align: 5px;cursor: pointer;font-size: 15px;color: #0099ff;" class="el-icon-edit" @click.stop="onChangeFileName(scope)" />
          </div>
        </template>
      </vxe-table-column>
      <vxe-table-column field="size" title="大小" width="90" align="center" />
      <vxe-table-column field="type" title="类型" width="100" align="center" />
      <vxe-table-column field="durationStr" title="时长" width="80" align="center" />
      <vxe-table-column field="progress" title="上传进度" width="180" align="center">
        <template slot-scope="scope">
          <el-progress :text-inside="true" :stroke-width="15