Отправка файлов из приложения Angular на Express Web Server

0

Я пытаюсь передать файл между моей формой HTML и работающим веб-сервером Express с помощью Angular. Если я удалю Угловое из уравнения и отправлю форму с обычной POST, Express получит файл.

Моя форма:

<form ng-submit="addEntry()" enctype="multipart/form-data">
<fieldset>
  <legend>Upload Image</legend>
  <div class="form-group">
    <label>
      mmol/L:
      <input type="number" ng-model="mmol">
    </label>
  </div>
  <div class="form-group">
    <label>
      Carbs:
      <input type="number" ng-model="carbs">
    </label>
  </div>
  <div class="form-group">
    <label>
      Image:
      <input type="file" name="file" file-upload file-changed="setFile(file)">
    </label>
  </div>
  <div class="form-group">
    <button type="submit">Submit</button>
  </div>
</fieldset>

Моя директива fileUpload:

app.directive('fileUpload', function() {
  return {
    scope: {
      fileChanged: '&'
    },
    link: function(scope, elem, attrs) {
      elem.bind('change', function(event) {
        scope.fileChanged({
          file: event.target.files[0]
        });
      });
    }
  }
});

Мой контроллер:

$scope.addEntry = function() {
  APIFactory.addEntry($scope.mmol, $scope.carbs, $scope.file);
}

APIFactory:

app.factory('APIFactory', ['$http', function($http) {
  return {
    addEntry: function(mmol, carbs, file) {
      var reading = {
        mmol: mmol,
        carbs: carbs,
        file: file
      };
      console.log(reading);
      $http({
        method: 'POST',
        url: 'http://localhost:1337/upload',
        data: reading
      }).then(function success(response) {
        console.log(response);
      }, function error(err) {
        console.log(err);
      })
    }
  }

}]);

Экспресс-сервер:

app.post('/upload', upload.single('image'), function(req, res) {
  var image = req.file;

  console.log(image);
});

Результат console.log (чтение) в APIFactory:

Object {mmol: 10, carbs: 10, file: File}

Результат console.log (образа) на моем Express Server:

undefined

В клиентской части приложения объект File передается. Проблема возникает, когда я пытаюсь передать ее на свой сервер. Кто-нибудь может понять, почему это происходит?

Теги:
express

1 ответ

0
Лучший ответ

Я нашел решение с помощью FormData

app.factory('APIFactory', ['$http', function($http) {
  return {
    addEntry: function(mmol, carbs, file) {
      var fd = new FormData();
      fd.append('mmol', mmol);
      fd.append('carbs', carbs);
      fd.append('file', file);

      $http({
        method: 'POST',
        url: 'http://localhost:1337/upload',
        data: fd,
        transformRequest: angular.identity,
        headers: {'Content-Type': undefined}
      }).then(function success(response) {
        console.log(response);
      }, function error(err) {
        console.log(err);
      })
    }
  }
}]);

Я также отредактировал мой экспресс-сервер, чтобы сообщить multer о multer одного файла с ключевым file.

app.post('/upload', upload.single('file'), function(req, res) {
  // Code omitted
});

И теперь я получаю свой файл в следующем формате:

{ fieldname: 'file',
  originalname: 'placeholder.png',
  encoding: '7bit',
  mimetype: 'image/png',
  buffer: <Buffer 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52 00 00 00 fa 00 00 00 fa 08 06 00 00 00 88 ec 5a 3d 00 00 0a 41 69 43 43 50 49 43 43 20 50 72 6f 66 69 ... >,
  size: 6022 }

Ещё вопросы

Сообщество Overcoder
Наверх
Меню