如何实际跟踪S3上传进度（JavaScript SDK）

Question

我希望能够追踪S3文件上传的进度（已上传字节数除以总字节数）。

在有人标记这个问题时，请注意这不是重复。我在StackOverflow上看到的每个答案实际上都是错误的。如果您执行以下操作：

s3
  .putObject(
    {
      Bucket: 'xyz',
      Key: 'wow.png',
      Body: data,
    },
    (err, data) => {
      console.log('done', err, data);
    }
  )
  .on('httpUploadProgress', progress => {
    console.log('Progress:', progress);
  });

您会收到一个进度更新，显示总大小：

Progress { loaded: 1082019, total: 1082019 }

这并不是有用的。我需要更详细的上传进度报告，就像你在上传过程中通常会看到的那样（无论文件大小是1MB还是100MB）：

0%完成
3%完成
7%完成
9%完成
(等等)

- ffxsam

---

编辑过了。我希望在上传过程中能够定期获得进展更新。 - ffxsam

你尝试过ManagedUpload吗？ https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3/ManagedUpload.html - Pablo

我试过了，但对我没用，因为你的部分大小必须至少为5MB。然后它只会报告每个5MB部分的完成情况。这对用户没有用处。 - ffxsam

默认的分块大小为5 MB，但是您可以使用minPartSize进行调整，只要不超过maxTotalParts（默认为10000，也可配置）。 - Khalid T.

顺便说一句，调整部件大小也不是理想的选择。如果我将部件大小降低到50KB以更好地跟踪上传，那么会导致大量部件同时上传，这可能不是一个好主意。有人知道如何访问S3中的原始XHR吗？ - ffxsam

Answer 1

这个回答虽然简陋，但是却是正确的。我分享这个信息是因为它可能会成为其他人的潜在难点。

这个方法不适用于Node.js环境！我曾经在Node.js环境中测试过它，结果只调用了一次httpUploadProgress回调函数。当我把代码移植到实际的前端客户端时，它按照期望工作并且打印出文件上传的进度。

- ffxsam

---

在浏览器中，SDK会向底层XmlHttpRequest的进度事件添加一个事件监听器。在Node中，通过读取主体流来检测进度。 - styks

Answer 2

试试这个：

s3
.putObject({
        Bucket: 'xyz',
        Key: 'wow.png',
        Body: data,
    },
    (err, data) => {
        console.log('done', err, data);
    }
)
.on('httpUploadProgress', ({ loaded, total }) => {
    console.log(ContentType, 'Progress:', loaded, '/', total, `${Math.round(100 * loaded / total)}%`);
})

- Rafael