将二进制数据从浏览器发送到JFrog / Artifactory服务器，而不使用表单数据 [英] POST binary data from browser to JFrog / Artifactory server without using form-data

问题描述

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

// html

 < input type =fileng-change =onFileChange> 
  

// javascript

  $ scope.onFileChange = function（e）{
 e.preventDefault（）; 
 let file = e.target.files [0]; 
 //我认为这只是一个二进制文件
 //我想HTTP将此文件发布到服务器
 //而不使用form-data 
}; 
  

我想知道的是 - 有没有办法将此文件发送到服务器，不包括该文件为form-data？问题是我发送HTTP POST请求的服务器，在收到请求时并不真正知道如何存储表单数据。

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

  fetch（'www.example.net'，{/ /你的POST端点
方法：'POST'，
 header：{
Content-Type：image / jpeg
}，
 body：e。 target.files [0] //文件
}）
 .then（
 response => response.json（）//如果响应是JSON对象
） 
  

解决方案

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

前端：

  //在AngularJS控制器中：
 
 $ scope.onAcqImageFileChange = function（e）{
 
 e.preventDefault（ ）; 
 let file = e.target.files [0]; 
 $ scope.acqImageFile = file; 
}; AngularJS服务中的
 
 // 
 
 createNewAcqImage：function（options）{
 
 let file = options.file; 
 
返回$ http（{
方法：'POST'，
 url：'/ proxy / image'，
数据：文件，
标题： {
'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}`，
标题：{
'授权'：'基本'+ Buffer.from（'cdt-deployer：foobar'）。toString（'base64'），
 } 
}，函数（resp）{
 resp.pipe（res）.once（'错误'，下一个）; 
}）; 
 
 req.pipe （代理）.once（'错误'，下一个）; 
}）; 
 
 module.exports = router; 
  

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

So we get a file (an image file) in the front-end like so:

//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
   };

What I want to know is - is there a way to POST this file to a server, without including the file as form-data? The problem is that the server I am send a HTTP POST request to, doesn't really know how to store form-data when it receives a request.

I believe this is the right way to do it, but I am not sure.

  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
  )

解决方案

Our front-end could not HTTP POST directly to the JFrog/Artifactory server. So we ended up using a Node.js server as a proxy, which is not very ideal.

Front-end:

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

Back-end:

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;

not that we had to use a PUT request to send an image to Artifactory, not POST, something to do with Artifactory (the engci-maven.nabisco.com server is an Artifactory server). As I recall, I got CORS issues when trying to post directly from our front-end to the other server, so we had to use our server as a proxy, which is something I'd rather avoid, but oh well for now.

这篇关于将二进制数据从浏览器发送到JFrog / Artifactory服务器，而不使用表单数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！