ajax - 不使用表单数据将二进制数据从浏览器发布到 JFrog/Artifactory 服务器

Question

所以我们在前端得到一个文件(一个图像文件)是这样的:

//html

  <input type="file" ng-change="onFileChange">

//javascript

  $scope.onFileChange = function (e) {
      e.preventDefault();
      let file = e.target.files[0];
      // I presume this is just a binary file
      // I want to HTTP Post this file to a server
      // without using form-data
   };

我想知道的是 - 有没有办法将此文件发布到服务器，而不将该文件作为表单数据包含在内？问题是我向其发送 HTTP POST 请求的服务器在收到请求时并不知道如何存储表单数据。

我相信这是正确的做法，但我不确定。

  fetch('www.example.net', { // Your POST endpoint
    method: 'POST',
    headers: {
      "Content-Type": "image/jpeg"
    },
    body: e.target.files[0] // the file
  })
   .then(
    response => response.json() // if the response is a JSON object
  )

Answer 1

您可以直接将文件附加到请求正文中。 Artifactory 不支持表单上传(和 it doesn't look like they plan to )

您仍然需要以某种方式代理请求以避免 CORS 问题，并且如果您使用的是用户凭据，则应谨慎对待它们。此外，您可以使用像 http-proxy-middleware 这样的库避免必须编写/测试/维护代理逻辑。

<input id="file-upload" type="file" />

<script>
function upload(data) {
  var file = document.getElementById('file-upload').files[0];
  var xhr = new XMLHttpRequest();
  xhr.open('PUT', 'https://example.com/artifactory-proxy-avoiding-cors');
  xhr.send(file);
}
</script>