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

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

//html

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

我想知道的是-有没有一种方法可以将此文件发布到服务器，而不将该文件作为表单数据包含在内？问题是，我向其发送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
  )

---

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

前端：

// 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'
          }
        })
      },

后端：

const express = require('express');
const router = express.Router();

router.post('/image', function (req, res, next) {

  const filename = uuid.v4();

  const proxy = http.request({
    method: 'PUT',
    hostname: 'engci-maven.nabisco.com',
    path: `/artifactory/cdt-repo/folder/${filename}`,
    headers: {
      'Authorization': 'Basic ' + Buffer.from('cdt-deployer:foobar').toString('base64'),
    }
  }, function(resp){
    resp.pipe(res).once('error', next);
  });

  req.pipe(proxy).once('error', next);
});

module.exports = router;

---

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

您可以直接将文件附加到请求正文。Artifactory不支持表单上载（和）

您仍然需要以某种方式代理请求以避免CORS问题，如果您使用的是用户凭据，那么您应该谨慎对待它们。此外，您还可以使用类似的库来避免编写/测试/维护代理逻辑

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

功能上传（数据）{
var file=document.getElementById（'file-upload'）.files[0]；
var xhr=new XMLHttpRequest（）；
xhr.open（'PUT'，'https://example.com/artifactory-proxy-avoiding-cors');
发送（文件）；
}

为什么您不确定您的方法是否是“正确的方法”？是的，您应该能够将

POST

a

Blob

或

File

实例发布到server@AlexanderMills：但您的服务器必须知道在接收到类型为image/jpeg的POST请求时要做什么。您使用的是什么服务器？我们需要HTTP POST/PUT到JFrog Artifactory服务器-我结束了使用我们的服务器作为Artifactory服务器的代理的过程。我将补充一个答案，说明我们是如何做到这一点的。也许有人可以看看我的答案，看看如何避免代理。

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