Multer и AngularJS

Question

Multer и AngularJS

0

Я не могу понять, как отправлять через угловой $ http. Зачем? Я бы хотел, чтобы мультер разбирал и сохранял мой файл и угловатый, чтобы получить копию, когда это будет сделано. Еще лучше, я бы хотел просто позволить угловому получить копию, а затем передать ее на сервер.

Я могу загрузить файл, используя приведенные ниже фрагменты:

// view (jade)
.container
  form(action="/upload", method="POST", enctype="multipart/form-data")
    input(type="file", name="f")
    input(type="submit", value="Upload")

// post route (express)
var multer = require('multer');
var upload = multer({ dest: 'uploads/' });
app.post('/upload', upload.single('f'), function(req, res) {
  console.log(req.file);
});

Выполняя это с любым образцом, возвращает json, который я хочу в консоль, и изображение успешно сохраняется в соответствующем каталоге. Однако:

// view (jade)
form(enctype="multipart/form-data" ng-submit="uploadFile(file)")
input(type="file", name="f", ng-model="file")
input(type="submit", value="Upload")

// ctrl (angular)
$scope.uploadFile = function(file) {
  console.log(file);
  $http.post('/upload', file);
};

// post route (express)
var multer = require('multer');
var upload = multer({ dest: 'uploads/' });
app.post('/upload', upload.single('f'), function(req, res) {
  console.log(req.file);
});

Это возвращает undefined на обоих входах в консоль, хотя я не изменял файл, я только изменил способ его отправки.

Это заставляет меня поверить в одну из двух вещей:

Представленные данные - это не то, что я думаю. Если это так, то что это? В журнале ничего не печатается.

ИЛИ

Представленные данные каким-то образом изменены угловыми. Если это так, как? Снова ничего не печатает в журнале.

Haywire Spark 26 авг. 2015, в 22:19

Источник

Теги:

javascript

angularjs

express

file-upload

multer

1 ответ

Ещё вопросы

igreka · Answer 1 · 2015-10-30T13-54-00.000Z

В первом случае, отправляя данные непосредственно через форму на сервер, вы позволяете html делать магию трансформации под капотом.

Во втором случае, отправляя через AngularJs через $ http, вам нужно указать промежуточное программное обеспечение, которое составляет $ http, необходимое преобразование, которое необходимо выполнить, чтобы запрос соответствовал атрибутам, которые вы передали форме.

За то, что я некоторое время боролся с этим, вот адаптация кода, который я использовал (для $ resource). Но я думаю, что он должен работать для своего базового $ http.

Итак, в вашем контроллере:

$scope.uploadFile = function(file) {
   console.log(file);
   var fd = new FormData();
    fd.append('file', file);
    $http.post(uploadUrl, fd, {
        transformRequest: angular.identity,
        headers: {
            'Content-Type': undefined},
            enctype: 'multipart/form-data'
        }
     })
    .success(function(){
    })
    .error(function(){
    });   
 };

Для этого вам необходимо привязать поле ввода файла к модели. Конечно, Angularjs не хочет делать это изначально по некоторым причинам.

В нефритовом представлении:

form(enctype="multipart/form-data" ng-submit....)
  input(type="file", name="f", ng-model="file" on change='angular.element(this).scope().readFile(this)')
  input(type="submit", value="Upload")

onchange - это JavaScript, а не AngularJs, и он вызывает функцию scope.readfile(), которую мы должны определить:

В контроллере:

$scope.readfile = function(elem) {
    var file= elem.files[0];
    var reader = new FileReader();
   reader.onload = function() {
       $scope.$apply(function(){
           $scope.file = file;
           $scope.imageUrl = reader.result // to display         image via ng-Src
       })
   }
   reader.readAsDataURL(file);
}

Я думаю, что это должно вернуть назад html волшебство обратно в углы при работе с формами.

Я предлагаю вам изучить JavaScript onchange, FormData и FileReader для фрагментов кода, подобных этим и лучшей документации.