Vue+element+oss realizes front-end fragment upload and breakpoint resume

<template>
 <div class="dashboard-editor-container">
 <el-upload
  class="upload-demo"
  action=""
  ref="upload"
  :file-list="fileList"
  :limit="2"
  :on-change="handleChange"
  :on-remove="handleRemove"
  :auto-upload="false"
  accept=""
 >
  <el-button slot="trigger" size="small" type="primary">Select file</el-button>
  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitForm">Upload to server</el-button>
  <el-button style="margin-left: 10px;" size="small" type="success" @click="resumeUpload">Continue</el-button>
  <el-button style="margin-left: 10px;" size="small" type="success" @click="stopUplosd">Pause</el-button>
  <el-button style="margin-left: 10px;" size="small" type="success" @click="abortMultipartUpload">Clear slice</el-button>
 </el-upload>
 <el-progress :percentage="percentage" :status="uploadStatus"></el-progress>
 </div>
</template>

<script>
 let OSS = require('ali-oss') // Import ali-oss plugin const client = new OSS({
 region: 'oss-cn-shanghai', //Fill in the value based on your bucket location accessKeyId: 'LTA*********RaXY', //AccessKeyId of your account
 accessKeySecret: 'uu1************GiS', //accessKeySecret of your own account
 bucket: 'a******o', //bucket name});
export default {
 data () {
 return {
  fileList:[],
  file: null,
  tempCheckpoint: null, // used to cache the current slice content uploadId: '',
  uploadStatus: null, // Progress bar upload status percentage: 0, // Progress bar percentage uploadName: '', // Full path of the bucket where the object is located}
 },
 mounted() {
 // window.addEventListener('online', this.resumeUpload);
 },
 methods: {
 // Click to upload to the server submitForm(file) {
  this.multipartUpload();
 },
 // Cancel the multipart upload event async abortMultipartUpload() {
  window.removeEventListener('online', this.resumeUpload)
  const name = this.uploadName; // The full path of the Bucket where the Object is located.
  const uploadId = this.upload; // Upload uploadId in multiple parts.
  const result = await client.abortMultipartUpload(name, uploadId);
  console.log(result, '=======Clear slice====');
 },
 // Pause multi-part upload.
 stopUplosd () {
  window.removeEventListener('online', this.resumeUpload) // Clear event listener when paused let result = client.cancel();
  console.log(result, '----------- Pause uploading -----------')
 },
 // Slice upload async multipartUpload () {
  if (!this.file) {
  this.$message.error('Please select a file')
  return
  }
  this.uploadStatus = null
  // console.log("this.uploadStatus",this.file, this.uploadStatus);

  this.percentage = 0
  try {
  //object-name can be customized as a file name (such as file.txt) or a directory (such as abc/test/file.txt) to upload the file to the current bucket or a specified directory under the bucket.
  let result = await client.multipartUpload(this.file.name, this.file, {
   headers: {
   'Content-Disposition': 'inline',
   'Content-Type': this.file.type //Note: Set according to the suffix of the image or file. I used '.png' images in my experiment. The specific reasons are explained below},
   progress: (p, checkpoint) => {
   this.tempCheckpoint = checkpoint;
   this.upload = checkpoint.uploadId
   this.uploadName = checkpoint.name
   this.percentage = p * 100
   // console.log(p, checkpoint, this.percentage, '---------uploadId-----------')
   // Breakpoint recording point. You cannot continue uploading directly after the browser is restarted. You need to trigger the upload operation manually.
   },
   meta: { year: 2020, people: 'dev' },
   mime: this.file.type
  });
  console.log(result, this.percentage, 'result= Slice upload completed=');
  } catch (e) {
  window.addEventListener('online', this.resumeUpload) // This listener is placed in the exception handling of disconnected network // Capture timeout exception.
  if (e.code === 'ConnectionTimeoutError') { // Request timeout exception handling this.uploadStatus = 'exception'
   console.log("TimeoutError");
   // do ConnectionTimeoutError operation
  }
  // console.log(e)
  }
 },
 // Resume uploading.
 async resumeUpload () {
  window.removeEventListener('online', this.resumeUpload)
  if (!this.tempCheckpoint) {
  this.$message.error('Please upload first')
  return
  }
  this.uploadStatus = null
  try {
  let result = await client.multipartUpload(this.file.name, this.file, {
   headers: {
   'Content-Disposition': 'inline',
   'Content-Type': this.file.type //Note: Set according to the suffix of the image or file. I used '.png' images in my experiment. The specific reasons are explained below},

   progress: (p, checkpoint) => {
   this.percentage = p * 100
   console.log(p, checkpoint, 'checkpoint----Restore uploaded slice information-------')
   this.tempCheckpoint = checkpoint;
   },
   checkpoint: this.tempCheckpoint,
   meta: { year: 2020, people: 'dev' },
   mime: this.file.type
  })
  console.log(result, 'result-=-=-Resume upload completed')
  } catch (e) {
  console.log(e, 'e-=-=-');
  }
 },

 // Select the file to change handleChange(file, fileList) {
  this.fileList = fileList.filter(row => row.uid == file.uid)
  this.file = file.raw
  //Upload when the file changes // this.submitForm(file)
 },
 handleRemove(file, fileList) {
  this.percentage = 0 //Set the progress bar to zero this.fileList = []
 },
 }
}
</script>

<style scoped>
</style>

 const client = new OSS({
 region: 'oss-cn-shanghai', //Fill in the value based on your bucket location accessKeyId: 'LT******XY', //AccessKeyId of your account
 accessKeySecret: 'uu*********GiS', //accessKeySecret of your own account
 bucket: 'a******io', //bucket name});

headers: {
   'Content-Disposition': 'inline',
   'Content-Type': this.file.type //Note: set according to the suffix of the image or file. I get the type of the file. The specific reason is explained below},