Question

所以我们在前端得到一个文件（图像文件），如下所示：

// HTML

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

// java描述

  $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>

Answer 2

我们的前端无法直接向JFrog / Artifactory服务器发送HTTP POST。所以我们最终使用Node.js服务器作为代理，这不是很理想。

前端：

<div class='row wow fadeInUp' *ngFor='let index of myArray; let i = index; let even = even'>
      <span *ngIf="even">
         <div class='col-md-6' >
             <md-card>
                <md-card-header>
                   <md-card-title>
                     {{myArray[i]}}
                   </md-card-title>
                 </md-card-header>
              </md-card>
         </div>
         <div class='col-md-6'>
             <md-card>
                <md-card-header>
                   <md-card-title>
                     {{myArray[i+1]}}
                   </md-card-title>
                 </md-card-header>
              </md-card>
        </div>
       </span>
    </div>

后端：

// in an AngularJS controller:

     $scope.onAcqImageFileChange = function (e) {

          e.preventDefault();
          let file = e.target.files[0];
          $scope.acqImageFile = file;
      };

// in an AngularJS service

     createNewAcqImage: function(options) {

        let file = options.file;

        return $http({
          method: 'POST',
          url: '/proxy/image',
          data: file,
          headers: {
            'Content-Type': 'image/jpeg'
          }
        })
      },

并非我们必须使用PUT请求将图像发送到Artifactory，而不是POST，与Artifactory有关（engci-maven.nabisco.com服务器是Artifactory服务器）。我记得，当我试图直接从我们的前端发布到另一台服务器时，我遇到了CORS问题，所以我们不得不使用我们的服务器作为代理，这是我宁愿避免的，但现在好了

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

2 个答案: