vue 实现aws s3 分段上传详细demo

以下是一个基于 Vue.js 实现 AWS S3 分段上传的简单 demo：

<template>
  <div>
    <input type="file" @change="onFileChange" />
    <button v-if="uploadId === null" @click="initiateMultipartUpload">Start Upload</button>
    <button v-else @click="completeMultipartUpload">Complete Upload</button>
    <div v-if="uploadId !== null">
      <div v-for="(part, index) in parts" :key="part.ETag">
        Part {{ index + 1 }}: {{ part.ETag }}
      </div>
      <div>Upload progress: {{ Math.floor(100 * (uploadedSize / fileSize)) }}%</div>
    </div>
  </div>
</template>

<script>
import AWS from 'aws-sdk'

export default {
  data() {
    return {
      file: null,
      uploadId: null,
      parts: [],
      uploadedSize: 0,
      fileSize: 0,
    }
  },
  methods: {
    onFileChange(event) {
      this.file = event.target.files[0]
    },
    async initiateMultipartUpload() {
      const s3 = new AWS.S3()

      const { UploadId } = await s3.createMultipartUpload({
        Bucket: '<your-bucket-name>',
        Key: this.file.name,
      }).promise()

      this.uploadId = UploadId
      this.fileSize = this.file.size
      this.uploadParts()
    },
    async uploadParts() {
      const s3 = new AWS.S3()
      const partSize = 5 * 1024 * 1024 // 5MB

      for (let index = 0; index < Math.ceil(this.fileSize / partSize); index++) {
        const start = index * partSize
        const end = Math.min(start + partSize, this.fileSize)

        const { UploadId } = await s3.uploadPart({
          Bucket: '<your-bucket-name>',
          Key: this.file.name,
          PartNumber: index + 1,
          UploadId: this.uploadId,
          Body: this.file.slice(start, end),
        }).promise()

        this.parts.push({ PartNumber: index + 1, ETag: UploadId })
        this.uploadedSize += end - start
      }
    },
    async completeMultipartUpload() {
      const s3 = new AWS.S3()

      await s3.completeMultipartUpload({
        Bucket: '<your-bucket-name>',
        Key: this.file.name,
        UploadId: this.uploadId,
        MultipartUpload: { Parts: this.parts },
      }).promise()

      this.uploadId = null
      this.parts = []
      this.uploadedSize = 0
      this.fileSize = 0
    },
  },
}
</script>

注意，这个 demo 只是一个简单的示例，缺少一些关键的功能，例如错误处理和上传进度的实时更新等。如果你要在生产环境中使用，请务必仔细测试和完善代码。同时，为了让这个 demo 能够运行，你需要安装 AWS SDK for JavaScript 并配置你的 AWS 访问凭证。