2015-09-03 3 views
0

Пожалуйста, помогите мне Я новичок в этом и для загрузки файла, я говорил об этом - http://goodheads.io/2015/06/22/handling-file-uploads-using-angularjs-node-and-express/Угловая JS JS Экспресс Node JS вопрос загрузки файла

моя реализация приводится ниже. На месте я удалил вещи, чтобы убедиться, что размер сообщения достаточно читабель. Главная проблема заключается только в разделе загрузки файлов, кроме того, что все работает как шарм. Пожалуйста помоги.

Адрес index.html.

<!doctype html> 
<html ng-app ="myApp"> 
<head> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 
<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"> 

<!-- Optional theme --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css"> 
</head> 
<body> 
<div class="container" ng-controller="AppCtrl"> 
<table width="500" border="2" cellspacing="2" cellpadding="2"> 
<form> 
    <tbody> 
<tr> 
     <td><input type="file" ng-file-select="fileSelected($files)" accept="'image/*'"></td> 
     <td><input type="submit" ng-click="uploadFile()" ></td> 
    </tr> 

    </tbody> 
</form> 
</table> 
</div> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script> 
<script src="controller.js"></script> 
<script type="text/javascript" src="../bower_components/ng-file-upload-shim/ng-file-upload-shim.js"></script> 
<script type="text/javascript" src="../bower_components/ng-file-upload-shim/ng-file-upload.js"></script> 
</body> 
</html> 
<form></form> 

Адрес, который направляет управляющий файл.

var myApp = angular.module('myApp', ['angularFileUpload']); 

myApp.controller('AppCtrl', ['$scope', '$http', 'upload', function($scope, $http, $upload) { 
    console.log("Hello World from controller"); 

    $scope.addData = function() 
    { 
     console.log($scope.user); 
     console.log("whore"); 
     $http.post('../addData', $scope.user).success(function(response) { 
     console.log(response); 
    }); 

    $scope.fileSelected = function(files) 

    { 
     if (files && files.length) { 
      $scope.file = files[0]; 
     } 

    $upload.upload({ 
     url: '../upload', 
     file: $scope.file 
    }) 
    .success(function(data) { 
     console.log(data, 'uploaded'); 
     }); 


    }; 
}; 

}]); 

Пожалуйста, проигнорируйте первую функцию для чего-то другого, но моя проблема - это что-то еще.

Теперь вот код сервера, в котором я использовал multer, чтобы сделать трюк.

var express = require('express'); 
var app = express(); 
var mongoose = require('mongoose'); 
var multer = require('multer'); 
var validator = require('node-mongoose-validator'); 
var bodyParser = require('body-parser') 
app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded({ extended: false })) 
app.use(multer({ 
dest: './uploads/' 
})); 

app.use(express.static(__dirname + '/public')); 
app.use(bodyParser.json()); 

Файл сервера очень большой, поэтому я не добавляю все маршруты и все разделы здесь. Когда я удаляю раздел, который имеет команду upload, он запускается без ошибок, но когда я добавляю его, отображается ошибка.

C:\nodefiles\new\node_modules\express\lib\application.js:209 
    throw new TypeError('app.use() requires middleware functions'); 
     ^
TypeError: app.use() requires middleware functions 
    at EventEmitter.use (C:\nodefiles\new\node_modules\express\lib\application.js:209:11) 
    at Object.<anonymous> (C:\nodefiles\new\server.js:9:5) 
    at Module._compile (module.js:460:26) 
    at Object.Module._extensions..js (module.js:478:10) 
    at Module.load (module.js:355:32) 
    at Function.Module._load (module.js:310:12) 
    at Function.Module.runMain (module.js:501:10) 
    at startup (node.js:129:16) 
    at node.js:814:3 

ответ

1

multer({dest: './uploads/'}) сам не возвращает функцию промежуточного программного обеспечения. Для получения промежуточной функции вам необходимо использовать одну из функций класса multer.

Значит, вы бы использовали его, как multer({...}).single(). Здесь описаны различные функции - https://github.com/expressjs/multer#singlefieldname.

Multer документ имеет хорошие примеры правого использования: https://github.com/expressjs/multer#usage

Для сохранения нажмите, здесь полный рабочий пример:

var multer = require('multer'); 
var upload = multer({ 
    dest: __dirname + '/../../public/uploads/', 
}); 

app.post('/api/data', upload.single('filenameInTheForm'), function (req, res, next) { 
    return res.ok(); 
}); 

Важно отметить, что filenameInTheForm должно совпадать с именем поля в multipart/form-data запрос.

Также существует небольшая разница в использовании app.use(..) и способа, описанного выше. app.use() приведет к тому, что промежуточное программное обеспечение будет выполнено для каждой конечной точки, если повезет, если тип содержимого не равен multipart/form-data, промежуточное программное обеспечение ничего не делает. Чтобы избежать незначительных издержек из-за того, что он все еще выполняет проверку типа контента, лучше использовать его, как в приведенном выше примере.

+0

спасибо за ваше время. Не могли бы вы показать этот пример лучше. Как и в случае с учебным типом, пожалуйста. Я хочу сохранить файл и иметь URL-адрес, чтобы сохранить его в базе данных. Тем временем я собираюсь прочитать документ github. –

+0

Добавлен рабочий пример. Просто измените каталог на все, что хотите, и '' filenameInTheForm'' должно совпадать с именем ввода файла. Вы хорошо пойдете! Я предлагаю вам по-прежнему читать документацию Multer, это будет ярче вашего дня. – tiblu

+0

thanks @tiblu Я внедрил код, и он работает без ошибок. У меня есть другая проблема, пожалуйста, проверьте http://stackoverflow.com/q/32382799/5225363, если у вас достаточно времени. Существует некоторая проблема, плюс элемент управления также не вызывает раздел сервера. –

Смежные вопросы