vue 实现aws s3 分段上传详细配置+案例demo+详细注解+进度条

好的，让我来分享一下Vue实现AWS S3分段上传的详细配置和案例demo。

首先，我们需要安装aws-sdk和vue-axios这两个依赖。在Vue项目中，我们可以使用以下命令进行安装：

npm install aws-sdk vue-axios --save

接下来，我们需要在Vue项目的配置文件中添加AWS S3的配置信息。在这个例子中，我们假设AWS S3的Bucket名称为“mybucket”，并且我们已经创建了一个对应的IAM用户，并为其创建了访问密钥和秘钥。配置文件的示例如下：

export default {
  aws: {
    region: 'us-west-2', // AWS S3的区域
    accessKeyId: 'access key id', // 访问密钥
    secretAccessKey: 'secret access key', // 秘钥
    bucket: 'mybucket' // S3 Bucket名称
  }
}

接下来，我们需要创建一个Vue组件来实现AWS S3分段上传。以下是一个示例组件：

<template>
  <div>
    <input type="file" ref="fileInput" @change="handleFileSelect" />
    <button @click="uploadFile">上传文件</button>
    <div>{{ uploadProgress }}</div>
  </div>
</template>

<script>
import AWS from 'aws-sdk'
import axios from 'vue-axios'
import config from '@/config'

export default {
  name: 'S3Uploader',

  data() {
    return {
      file: null,
      uploadId: null,
      parts: [],
      uploadProgress: 0
    }
  },

  methods: {
    handleFileSelect() {
      this.file = this.$refs.fileInput.files[0]
    },

    async initiateMultipartUpload() {
      const s3 = new AWS.S3({
        region: config.aws.region,
        accessKeyId: config.aws.accessKeyId,
        secretAccessKey: config.aws.secretAccessKey
      })

      const response = await s3.createMultipartUpload({
        Bucket: config.aws.bucket,
        Key: this.file.name
      }).promise()

      this.uploadId = response.UploadId
    },

    async uploadPart(partNumber, partData) {
      const s3 = new AWS.S3({
        region: config.aws.region,
        accessKeyId: config.aws.accessKeyId,
        secretAccessKey: config.aws.secretAccessKey
      })

      const response = await s3.uploadPart({
        Bucket: config.aws.bucket,
        Key: this.file.name,
        UploadId: this.uploadId,
        PartNumber: partNumber,
        Body: partData
      }).promise()

      this.parts.push({
        ETag: response.ETag,
        PartNumber: partNumber
      })
    },

    async completeMultipartUpload() {
      const s3 = new AWS.S3({
        region: config.aws.region,
        accessKeyId: config.aws.accessKeyId,
        secretAccessKey: config.aws.secretAccessKey
      })

      await s3.completeMultipartUpload({
        Bucket: config.aws.bucket,
        Key: this.file.name,
        UploadId: this.uploadId,
        MultipartUpload: {
          Parts: this.parts
        }
      }).promise()
    },

    async uploadFile() {
      // 初始化分段上传
      await this.initiateMultipartUpload()

      // 计算分段大小
      const PART_SIZE = 1024 * 1024 * 5 // 5MB

      // 计算文件分段数量
      const numParts = Math.ceil(this.file.size / PART_SIZE)

      // 创建分段上传任务
      const tasks = Array.from({ length: numParts }, (v, i) => {
        const start = i * PART_SIZE
        const end = Math.min(start + PART_SIZE, this.file.size)

        return () => {
          return new Promise((resolve, reject) => {
            const reader = new FileReader()

            reader.onload = async () => {
              try {
                // 上传分段
                await this.uploadPart(i + 1, reader.result)

                // 计算上传进度
                this.uploadProgress = Math.ceil((i + 1) / numParts * 100)

                resolve()
              } catch (e) {
                reject(e)
              }
            }

            reader.readAsArrayBuffer(this.file.slice(start, end))
          })
        }
      })

      // 并发执行所有上传任务
      await Promise.all(tasks.map(task => task()))

      // 完成分段上传
      await this.completeMultipartUpload()

      // 清空上传进度
      this.uploadProgress = 0
    }
  }
}
</script>

上面的代码中，我们使用AWS SDK提供的“createMultipartUpload”、“uploadPart”和“completeMultipartUpload”方法来实现AWS S3分段上传。这些方法都是异步的，因此我们使用async/await语法来处理它们的返回结果。

在uploadFile方法中，我们首先调用initiateMultipartUpload方法来初始化分段上传，并获取一个上传ID。然后，我们计算文件分段数量，并为每个分段创建一个上传任务。每个上传任务都会读取相应分段的数据，并调用uploadPart方法来上传数据。上传过程中，我们会计算上传进度，并将其保存在uploadProgress变量中。最后，我们调用completeMultipartUpload方法来完成分段上传。

在模板中，我们使用一个文件输入框和一个上传按钮来触发文件上传。同时，我们使用一个div元素来显示上传进度。以下是模板代码：

<template>
  <div>
    <input type="file" ref="fileInput" @change="handleFileSelect" />
    <button @click="uploadFile">上传文件</button>
    <div>{{ uploadProgress }}</div>
  </div>
</template>

最后，我们需要将S3Uploader组件注册到Vue应用程序中。这可以通过以下代码完成：

import S3Uploader from '@/components/S3Uploader'

export default {
  name: 'App',

  components: {
    S3Uploader
  }
}

这样，我们就完成了Vue实现AWS S3分段上传的所有配置和代码。希望这个例子对你有所帮助！