el-upload上传文件（分片上传和一次性上传）

<template>
 <div>
  <div style="height: 60px; line-height: 60px">
   <el-radio v-model="checked" :label="false">一次性</el-radio>
   <el-radio v-model="checked" :label="true">分包</el-radio>
   <template v-if="checked">
    <span>每包</span>
    <el-input style="width: 100px" size="mini" v-model="num" placeholder="单位KB"></el-input>
    <span>KB</span>
   </template>
  </div>
  <!-- accept=".svg" -->
  <el-upload
   ref="upload"
   drag
   action="#"
   :limit="1"
   :on-remove="remove_svg"
   :on-error="uploadError"
   :on-exceed="handleExceed"
   :on-change="handle_svg_change"
   :auto-upload="false"
  >
   <i class="el-icon-upload"></i>
   <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
   <div class="el-upload__tip" slot="tip">只可上传一个文件</div>
  </el-upload>
  <span slot="footer" class="dialog-footer">
   <el-button size="small" @click="cancel_upload">取 消</el-button>
   <el-button size="small" type="primary" @click="confirm_upload">上 传</el-button>
  </span>
 </div>
</template>

<script>
import { uploadfile } from '../utils/api'
export default {
 name: 'UploadFile',
 data() {
  return {
   num: 100,
   checked: false,
   headers: {
    filename: '',
    'Content-Type': 'application/octet-stream',
   },
  }
 },
 methods: {
  // 取消上传
  cancel_upload() {
   this.headers.filename = ''
   this.body = ''
   this.$refs.upload.clearFiles()
  },
  // 确认上传
  confirm_upload() {
   if (!this.body) return this.$message.warning('请先选择文件...')
   if (!this.checked) { // 一次性上传
    uploadfile(this.body, this.headers)
     .then((res) => {
      this.cancel_upload()
      return this.$message.success('上传成功...')
     })
     .catch((e) => {
      console.log(e)
     })
   } else {
    let array_splice = _.chunk(this.body, 1024 * this.num)
    let headers = _.cloneDeep(this.headers)
    headers.subpacknum = array_splice.length // 一共几片
    headers.subpackend = 0 // 是否结束，1结束0未结束
    headers.subpackno = 0 // 上传序号，从0开始
    //  依次请求
    let request_arr = () => {
     if (headers.subpackno == headers.subpacknum - 1) {
      headers.subpackend = 1
     }
     let body = array_splice[headers.subpackno]
     body = new Uint8Array(body)
     uploadfile(body, headers)
      .then((res) => {
       if (headers.subpackno == headers.subpacknum - 1) {
        this.cancel_upload()
        return this.$message.success('上传成功!')
       } else {
        headers.subpackno += 1
        return request_arr()
       }
      })
      .catch((e) => {
       console.log(e)
       return this.$message.warning('上传失败，请重新上传')
      })
    }
    request_arr() // 第一次请求
   }
  },
  // 超出上传文件数目的提示
  handleExceed() {
   return this.$message.warning('只能上传一个文件...')
  },
  // 上传失败
  uploadError(e) {
   console.log(e)
   return this.$message.error('上传失败...')
  },
  // 移除文件
  remove_svg() {
   this.headers.filename = ''
   this.body = ''
  },
  // 文件改变时变化
  handle_svg_change(file, fileList) {
   let reader = new FileReader()
   this.headers.filename = encodeURIComponent(file.name)
   reader.onload = () => {
    let binaryData = reader.result
    let byteStream = new Uint8Array(binaryData)
    this.body = byteStream
   }
   reader.readAsArrayBuffer(file.raw) // 读文件
  },
 },
 mounted() {},
}
</script>

<style lang="scss" scoped></style>