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

好的，下面是详细配置及案例demo：

1. 安装aws-sdk和aws-sdk-vue

npm install aws-sdk aws-sdk-vue --save

2. 创建一个S3的Vue组件

<template>
  <div>
    <input type="file" @change="onFileChange"/>
    <div v-if="isUploading">
      <div>Uploading...{{uploaded}}%</div>
      <progress :value="uploaded" max="100"></progress>
    </div>
  </div>
</template>

<script>
import AWS from 'aws-sdk';
import { AWSS3Vue } from 'aws-sdk-vue';

export default {
  name: 'S3Uploader',
  data() {
    return {
      isUploading: false,
      uploaded: 0,
      file: null,
      s3: null,
      uploadId: null,
      parts: []
    };
  },
  computed: {
    region() {
      return 'your-s3-region';
    },
    bucketName() {
      return 'your-s3-bucket-name';
    },
    accessKeyId() {
      return 'your-access-key-id';
    },
    secretAccessKey() {
      return 'your-secret-access-key';
    },
    maxPartSize() {
      return 5 * 1024 * 1024; // 5MB
    },
    partSize() {
      return Math.max(Math.ceil(this.file.size / 10000), this.maxPartSize);
    },
    numParts() {
      return Math.ceil(this.file.size / this.partSize);
    }
  },
  methods: {
    async onFileChange(event) {
      this.file = event.target.files[0];
      this.s3 = AWSS3Vue({
        accessKeyId: this.accessKeyId,
        secretAccessKey: this.secretAccessKey,
        region: this.region
      });
      this.uploadId = await this.createMultipartUpload();
      await this.uploadParts();
      await this.completeMultipartUpload();
    },
    async createMultipartUpload() {
      const response = await this.s3.createMultipartUpload({
        Bucket: this.bucketName,
        Key: this.file.name,
      }).promise();
      return response.UploadId;
    },
    async uploadParts() {
      for (let i = 0; i < this.numParts; i++) {
        const start = i * this.partSize;
        const end = Math.min(start + this.partSize, this.file.size);
        const buffer = this.file.slice(start, end);
        const response = await this.s3.uploadPart({
          Bucket: this.bucketName,
          Key: this.file.name,
          PartNumber: i + 1,
          UploadId: this.uploadId,
          Body: buffer
        }).promise();
        this.parts.push({
          ETag: response.ETag,
          PartNumber: i + 1
        });
        this.uploaded = Math.ceil((i + 1) / this.numParts * 100);
      }
    },
    async completeMultipartUpload() {
      await this.s3.completeMultipartUpload({
        Bucket: this.bucketName,
        Key: this.file.name,
        UploadId: this.uploadId,
        MultipartUpload: {
          Parts: this.parts
        }
      }).promise();
    }
  }
};
</script>

3. 在Vue应用中使用S3Uploader组件

<template>
  <div>
    <s3-uploader />
  </div>
</template>

<script>
import S3Uploader from '@/components/S3Uploader.vue';

export default {
  name: 'App',
  components: {
    S3Uploader
  }
};
</script>

在上面的示例中，我们使用AWS SDK和aws-sdk-vue实现了一个基本的S3上传器，它可以将大文件分成多个部分并上传到S3存储桶。我们还使用了计算属性来计算分块大小和分块数量，并使用async/await实现了异步上传。

最后，我们使用Vue组件来封装整个上传过程，并使用Vue组件的事件来处理上传成功或失败的情况。同时，我们还添加了一个简单的进度条来显示上传进度。