Javascript的AWS uploadpart函数中的XMLHttpRequest网络故障

时间:2016-11-04 09:18:38

标签: javascript amazon-web-services amazon-s3

我正在尝试使用Javascript SDK在AWS中实现分段上传。我的理解是,首先我必须创建一个启动请求,然后上传部分,然后提供完整的请求。我能够成功创建请求并上传文件的第一部分,但是当我尝试上传第二部分时,我总是会遇到以下错误:

{ "message": "Network Failure", "code": "NetworkingError", "time": "2016-11-04T08:55:46.056Z", "region": "us-east-1", "hostname": "bucketname.s3.amazonaws.com", "retryable": true }, NetworkingError: Network Failure at XMLHttpRequest. (https://sdk.amazonaws.com/js/aws-sdk-2.6.15.min.js:34:12349)

我为它实现了以下代码:     

<head>
  <title>JavaScript SDK AWS</title>
    <script src="https://sdk.amazonaws.com/js/aws-sdk-2.6.15.min.js"></script>
</head>

<body>
  <iframe id="myFrame" style="display:none"></iframe>


<!-- UPLOADING AN OBJECT INTO S3 -->

<input type="file" multiple id="file-chooser" /> <!-- file chooser to upload  a file --> 
<!--<input type="file" multiple id="file-chooser" /> --><!-- multiple file chooser to upload  a file --> 
<button id="initiate-request-button">Initiate request</button> <!-- button to create request for multiupload to s3 -->
<button id="upload-parts-button">Upload Part1 to S3</button> <!-- button to upload parts to s3 -->
<button id="upload-parts-button1">Upload Part2 to S3</button> <!-- button to upload parts to s3 -->
<button id="complete-parts-request-button">Complete multi part request </button> <!-- button to complete upload request to s3 -->
<div id="tempresults"></div>
<div id="tempresultsid"></div>
<div id="results"></div>


<script type="text/javascript">
//USE THE HTTPGET FUNCTION HERE TO GET CREDENTIALS INSTEAD OF HARDCODING.   

var openIDToken = '{"AccessKeyId":access_key_id,"SecretAccessKey":secret_access_key}';


    //PARSE THE JSON OBJECT TO GET CREDENTIALS. 
    obj =  JSON.parse(openIDToken);
        var AccessKeyId = obj.AccessKeyId; //Get AccessID  
        var SecretAccessKey = obj.SecretAccessKey; //Get secret key for the user

        //set region to Whichever region is being used. 
        AWS.config.region = 'us-east-1';

        //set credentials to AWS
        AWS.config.update({accessKeyId: AccessKeyId,  
                           secretAccessKey: SecretAccessKey
                       });

    var s3BucketName = 'bucketname';
    var results = document.getElementById('results'); //get the results field. 
    var tempresults = document.getElementById('tempresults'); //get the results field. 
    var tempresultsid = document.getElementById('tempresultsid'); //get the results field. 
    results.innerHTML = ''; //set results to '' before trying anything. 
    var s3 = new AWS.S3({ params: {Bucket: s3BucketName} , httpOptions: {timeout: 20000000}});
    var fileChooser = document.getElementById('file-chooser'); //get the filechooser. 
    var uploadID= ''; //for uploadid of initial request
    var initiaterequestbutton = document.getElementById('initiate-request-button'); //get the upload button 

    initiaterequestbutton.addEventListener('click', function()  //add a event listener to the click button 
      {
      var file = fileChooser.files[0]; 

        results.innerHTML = ''; //set results to '' before trying anything. 
        tempresults.innerHTML = ''; //set results to '' before trying anything. 
        var params = {
          Bucket: s3BucketName, /* required */
          Key: file.name
        };
        s3.createMultipartUpload(params, function(err, data) {
          if (err) {
            results.innerHTML = JSON.stringify(err, null, 4)+', '+err.stack;
          } else {
            uploadID = JSON.stringify(data.UploadId, null, 4);
            tempresults.innerHTML = fileChooser.files[0];
            uploadID = uploadID.substring(1,uploadID.length-1);
            // results.innerHTML = uploadID.substring(1,uploadID.length-1);
          }
        });

    }, false);

      var uploadpartsbutton = document.getElementById('upload-parts-button'); //get the upload button 
      uploadpartsbutton.addEventListener('click', function()  //add a event listener to the click button 
      {
          var file = fileChooser.files[0]; 

          var params = {
            Bucket: s3BucketName, /* required */
            Key: file.name, /* required */
            PartNumber: 1, /* required */
            UploadId: uploadID, /* required */
            Body: file
          };
          var tempresultsid = document.getElementById('tempresultsid'); //get the results field. 
          tempresultsid.innerHTML = uploadID;
          s3.uploadPart(params, function(err, data) {
              if (err) {
              results.innerHTML += "**"+JSON.stringify(err, null, 4)+', '+err.stack;
            } else {
              results.innerHTML += "**"+JSON.stringify(data, null, 4);
            }
          });
        }, false);

        var uploadpartsbutton1 = document.getElementById('upload-parts-button1'); //get the upload button 
        uploadpartsbutton1.addEventListener('click', function()  //add a event listener to the click button 
      {
          var file = fileChooser.files[0]; 

          var params = {
            Bucket: s3BucketName, /* required */
            Key: file.name, /* required */
            PartNumber: 2, /* required */
            UploadId: uploadID, /* required */
            Body: file
          };
          var tempresultsid = document.getElementById('tempresultsid'); //get the results field. 
          tempresultsid.innerHTML = uploadID;
          s3.uploadPart(params, function(err, data) {
              if (err) {
              results.innerHTML += "**"+JSON.stringify(err, null, 4)+', '+err.stack;
            } else {
              results.innerHTML += "**"+JSON.stringify(data, null, 4);
            }
          });

          }, false);



</script> 
</body>

</html>

可以看出,第二个文件上传部分与第一个艺术品上传完全相同,尽管是部件号。

我按以下方式运行代码:

  1. 我首先选择使用文件选择器上传的第一部分。
  2. 然后我使用“启动请求”按钮启动请求。 代码运行正常,并为我提供了所需的uploadid。
  3. 然后我按下“将Part1上传到S3”以上传已在filechooser中选择的part1。此代码也运行良好,并返回etag。
  4. 我在同一文件选择器中选择第二部分,然后按“将Part2上传到S3”。这是我得到错误的地方。 即使在浏览器控制台的网络选项卡中,它也会显示错误:

    净:: ERR_CONNECTION_RESET

  5. 我不明白为什么会发生这种情况,因为相同的代码适用于第一个文件(up.zip)然后然后第二个文件失败。随附浏览器控制台的屏幕截图。

    enter image description here

1 个答案:

答案 0 :(得分:0)

解决了这个问题。所有部分都需要具有相同的文件名,至少解决了我的这个问题。