POST binary data from browser to JFrog / Artifacto

2019-06-09 14:51发布

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
  )

1条回答
Explosion°爆炸
2楼-- · 2019-06-09 15:20

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.

查看更多
登录 后发表回答