Двоичные данные POST из браузера на сервер JFrog/Artifactory без использования данных формы

Итак, мы получаем файл (файл изображения) во внешнем интерфейсе, например:

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

http image ajax fetch-api
person Alexander Mills    schedule 19.07.2017    source источник
comment
Почему вы не уверены, что ваш подход является правильным способом сделать это? Да, вы должны иметь возможность POST Blob или File экземпляра на сервер   -  person guest271314    schedule 22.07.2017
comment
@AlexanderMills: Но тогда ваш сервер должен знать, что делать при получении POST-запроса с типом image/jpeg. Какой сервер вы используете?   -  person Sorin Postelnicu    schedule 02.11.2017
comment
Нам нужно отправить HTTP POST/PUT на сервер JFrog Artifactory — я перестал использовать наш сервер в качестве прокси для сервера Artifactory. Я добавлю ответ, показывающий, как мы это сделали. Может быть, кто-то может посмотреть на мой ответ и показать, как можно избежать прокси.   -  person Alexander Mills    schedule 04.11.2017

Ответы (2)


arrow_upward
1
arrow_downward

Вы можете напрямую прикрепить файл к телу запроса. Artifactory не поддерживает загрузку форм (и не похоже, что они планируют это делать)

Вам по-прежнему нужно каким-то образом проксировать запрос, чтобы избежать проблем с CORS, и если вы используете учетные данные пользователя, вы должны быть осторожны в том, как вы их обрабатываете. Кроме того, вы можете использовать такую ​​библиотеку, как https://www.npmjs.com/package/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>
person ATOMP    schedule 06.07.2019

arrow_upward
0
arrow_downward

Наш внешний интерфейс не мог использовать 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 при попытке опубликовать напрямую с нашего внешнего интерфейса на другой сервер, поэтому нам пришлось использовать наш сервер в качестве прокси, чего я бы предпочел избежать, но пока ладно.

person Alexander Mills    schedule 04.11.2017