vue 实现aws s3 分段上传详细配置+案例demo

AWS S3 分段上传是一种将文件分成多个部分上传到S3的方式，这样可以提高上传速度和稳定性。在Vue中，我们可以使用AWS SDK for JavaScript来实现S3分段上传。

下面是一个完整的Vue示例，演示如何使用AWS SDK for JavaScript实现S3分段上传。

首先，我们需要安装AWS SDK for JavaScript：

npm install aws-sdk

然后，在Vue组件中，我们可以按如下方式导入AWS SDK：

import AWS from 'aws-sdk';

接下来，我们需要初始化AWS SDK，并配置S3：

AWS.config.update({
  accessKeyId: 'YOUR_ACCESS_KEY_ID',
  secretAccessKey: 'YOUR_SECRET_ACCESS_KEY',
  region: 'YOUR_REGION'
});

const s3 = new AWS.S3({
  apiVersion: '2006-03-01',
  params: { Bucket: 'YOUR_BUCKET_NAME' }
});

现在，我们已经配置好了S3，接下来是分段上传的核心：

async uploadFile() {
  const file = this.$refs.fileInput.files[0];
  const fileSize = file.size;
  const chunkSize = 1024 * 1024 * 5; // 5MB per chunk
  const chunks = Math.ceil(fileSize / chunkSize);

  const params = {
    Key: file.name,
    ContentType: file.type,
    ACL: 'public-read'
  };

  const uploadId = await s3.createMultipartUpload(params).promise();

  const promises = [];
  let uploadedSize = 0;

  for (let i = 1; i <= chunks; i++) {
    const start = (i - 1) * chunkSize;
    const end = Math.min(i * chunkSize, fileSize);
    const chunk = file.slice(start, end);

    const partParams = {
      Body: chunk,
      Key: file.name,
      PartNumber: i,
      UploadId: uploadId.UploadId
    };

    promises.push(s3.uploadPart(partParams).promise().then(data => {
      uploadedSize += chunk.size;
      console.log(`Uploaded ${uploadedSize} bytes`);
      return {
        ETag: data.ETag,
        PartNumber: i
      };
    }));
  }

  const parts = await Promise.all(promises);

  const completeParams = {
    Key: file.name,
    MultipartUpload: {
      Parts: parts
    },
    UploadId: uploadId.UploadId
  };

  await s3.completeMultipartUpload(completeParams).promise();
  console.log('Upload complete');
}

这里，我们首先计算出文件的大小和每个块的大小。然后，我们创建一个上传任务，并将文件分成多个块。对于每个块，我们将其上传到S3，并记录上传的总大小。上传完成后，我们将所有块合并为一个文件，完成上传。

最后，我们需要在Vue模板中添加一个文件输入框和一个上传按钮：

<template>
  <div>
    <input type="file" ref="fileInput">
    <button @click="uploadFile">Upload</button>
  </div>
</template>

完整的代码如下所示：

<template>
  <div>
    <input type="file" ref="fileInput">
    <button @click="uploadFile">Upload</button>
  </div>
</template>

<script>
import AWS from 'aws-sdk';

export default {
  methods: {
    async uploadFile() {
      const file = this.$refs.fileInput.files[0];
      const fileSize = file.size;
      const chunkSize = 1024 * 1024 * 5; // 5MB per chunk
      const chunks = Math.ceil(fileSize / chunkSize);

      const params = {
        Key: file.name,
        ContentType: file.type,
        ACL: 'public-read'
      };

      const uploadId = await s3.createMultipartUpload(params).promise();

      const promises = [];
      let uploadedSize = 0;

      for (let i = 1; i <= chunks; i++) {
        const start = (i - 1) * chunkSize;
        const end = Math.min(i * chunkSize, fileSize);
        const chunk = file.slice(start, end);

        const partParams = {
          Body: chunk,
          Key: file.name,
          PartNumber: i,
          UploadId: uploadId.UploadId
        };

        promises.push(s3.uploadPart(partParams).promise().then(data => {
          uploadedSize += chunk.size;
          console.log(`Uploaded ${uploadedSize} bytes`);
          return {
            ETag: data.ETag,
            PartNumber: i
          };
        }));
      }

      const parts = await Promise.all(promises);

      const completeParams = {
        Key: file.name,
        MultipartUpload: {
          Parts: parts
        },
        UploadId: uploadId.UploadId
      };

      await s3.completeMultipartUpload(completeParams).promise();
      console.log('Upload complete');
    }
  },
  mounted() {
    AWS.config.update({
      accessKeyId: 'YOUR_ACCESS_KEY_ID',
      secretAccessKey: 'YOUR_SECRET_ACCESS_KEY',
      region: 'YOUR_REGION'
    });

    const s3 = new AWS.S3({
      apiVersion: '2006-03-01',
      params: { Bucket: 'YOUR_BUCKET_NAME' }
    });
  }
};
</script>

当然，具体的实现方式还要根据自己的需求进行调整。