AWS SDK JavaScript：如何显示 AWS.S3.putObject 的上传进度？

Posted 2023-03-22

【中文标题】AWS SDK JavaScript：如何显示 AWS.S3.putObject 的上传进度？

【英文标题】：AWS SDK JavaScript: how display upload progress of AWS.S3.putObject?

【发布时间】：2014-07-13 04:03:13

【问题描述】：

我正在开发一个 javascript 客户端来将文件直接上传到 Amazon S3。

<input type="file" id="file-chooser" /> 
<button id="upload-button">Upload to S3</button>
<div id="results"></div>

<script type="text/javascript">
  var bucket = new AWS.S3(params: Bucket: 'myBucket');

  var fileChooser = document.getElementById('file-chooser');
  var button = document.getElementById('upload-button');
  var results = document.getElementById('results');
  button.addEventListener('click', function() 
    var file = fileChooser.files[0];
    if (file) 
      results.innerhtml = '';

      var params = Key: file.name, ContentType: file.type, Body: file;
      bucket.putObject(params, function (err, data) 
        results.innerHTML = err ? 'ERROR!' : 'UPLOADED.';
      );
     else 
      results.innerHTML = 'Nothing to upload.';
    
  , false);
</script>

亚马逊文档中的示例运行良好，但没有提供有关上传进度的任何反馈。

有什么想法吗？

谢谢

【问题讨论】：

添加进度条解决方案@fkj

【参考方案1】：

与其使用s3.PutObject 函数，不如使用ManagedUpload 函数。

它经过专门开发，允许您连接到 httpUploadProgress 事件，该事件应该可以相当容易地实现进度条的更新。

【参考方案2】：

我对文件上传进度做了一些自定义。在节点、角度和 javascript 中使用相同的逻辑。

这是存储库链接：

https://github.com/aviboy2006/aws-s3-file-upload-progress

使用这个小提琴进行测试：https://jsfiddle.net/sga3o1h5/

注意：更新访问密钥、存储桶名称和密钥。

 var bucket = new AWS.S3(
   accessKeyId: "",
   secretAccessKey: "",
   region: 'us-east-1'
 );

 uploadfile = function(fileName, file, folderName) 
   const params = 
     Bucket: "fileuploadprocess",
     Key: folderName + fileName,
     Body: file,
     ContentType: file.type
   ;
   return this.bucket.upload(params, function(err, data) 

     if (err) 
       console.log('There was an error uploading your file: ', err);
       return false;
     
     console.log('Successfully uploaded file.', data);
     return true;
   );
 

 uploadSampleFile = function() 
   var progressDiv = document.getElementById("myProgress");
   progressDiv.style.display="block";
   var progressBar = document.getElementById("myBar");
   file = document.getElementById("myFile").files[0];
   folderName = "Document/";
   uniqueFileName = 'SampleFile'; 
   let fileUpload = 
     id: "",
     name: file.name,
     nameUpload: uniqueFileName,
     size: file.size,
     type: "",
     timeReference: 'Unknown',
     progressStatus: 0,
     displayName: file.name,
     status: 'Uploading..',
   
   uploadfile(uniqueFileName, file, folderName)
     .on('httpUploadProgress', function(progress) 
       let progressPercentage = Math.round(progress.loaded / progress.total * 100);
       console.log(progressPercentage);
       progressBar.style.width = progressPercentage + "%";
       if (progressPercentage < 100) 
         fileUpload.progressStatus = progressPercentage;

        else if (progressPercentage == 100) 
         fileUpload.progressStatus = progressPercentage;

         fileUpload.status = "Uploaded";
       
     )
 

【讨论】：

试试这个代码。有人更改可能是代码。github.com/aviboy2006/aws-s3-file-upload-progress/blob/master/…

为什么你的 jsfiddle 打开了秘钥？

移除了 Jsfiddle。