如何使用 Angularjs 中的 ng-file 上传库以二进制格式上传文件？

Question

我正在使用来自 AngularJs 的预签名 URL 将文件上传到 Amazon S3 Bucket。打开下载的文件时 Zip 文件损坏。当我以二进制格式从邮递员上传文件时，它按预期工作。

我在 angularjs 中使用 ng-file-upload 库。对于每个下载的文件都包含在开头附加的 web-kit 表单边界，如下所示：

如果我们编辑并删除 web-kit 表单边界并尝试打开相同的文件，它的打开方式是完美的。

Answer 1

一周前我遇到了同样的问题，我想到的唯一解决方案是编写自己的代码，通过 http 请求发送文件。随意使用示例：

function azureChangeFn() {
   var inputElement = document.getElementById("fileSelect");
   var newFile = inputElement.files[0];
   var url = "https://YOUR_STORAGE_NAME.blob.core.windows.net/CONTAINER_NAME/"+ newFile.name +"GENERATED_SharedAccessSignature_FROM_AZURE_SITE";
   
   var xhr = new XMLHttpRequest();
   xhr.addEventListener("progress", updateProgress);
   xhr.onreadystatechange = function() {
    if (xhr.readyState == XMLHttpRequest.DONE) {
     alert("Sent to azure storage service!");
    }
   }
   xhr.open('PUT', url, true);
   xhr.setRequestHeader("Content-type", "multipart/form-data");
   xhr.setRequestHeader("lng", "en");
   xhr.setRequestHeader("x-ms-blob-type", "BlockBlob");
   xhr.setRequestHeader("x-ms-blob-content-type", newFile.type);
   xhr.send(newFile);
  }
  
  function updateProgress (oEvent) {
    if (oEvent.lengthComputable) {
   var percentComplete = oEvent.loaded / oEvent.total;
   console.log(percentComplete);
    } else {
   alert('FAIL');
    }
  }

<html>

<head>
</head>

<body>
  <label>Example without library:</label>
  <br>
  <label>Select file: <input type="file" id="fileSelect" onchange="azureChangeFn()"></label>
  
  
</body>
</html>

关于 ng-file-upload 库，在源代码中我发现 formData.append 方法在追加文件时自动添加 web-kit header。据我了解，FormData 用于 POST 方法，但是当使用 PUT 时，所有 body 都被视为一个文件。遗憾的是，我无法使用 POST 方法将文件上传到 Azure 存储。

如何使用 Angularjs 中的 ng-file 上传库以二进制格式上传文件？

How to upload file in binary format using ng-file upload library in Angularjs?

javascript

angularjs

amazon-s3

ng-file-upload