Angulas JS防爆preSS JS节点JS文件上传问题 [英] Angulas JS Express JS Node JS file upload issue
问题描述
请帮我
我是新来的这一点，并进行文件上传我提到这一点 - 的http://goodheads.io/2015/06/22/handling-file-uploads-using-angularjs-node-and-ex$p$pss/
我的实现如下。在地方，我已删除的东西，以确保后大小就足够了可读性。主要的问题是不是一切工作就像一个魅力只有其他文件上传部分。请帮忙。
下面是index.html的部分。
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML NG-应用=对myApp＆GT;
＆LT; HEAD＆GT;
＆LT;间的charset =UTF-8＆GT;
＆LT;标题＆GT;无标题文档＆LT; /标题＆GT;
＆LT;！ - 最新编译和精缩CSS - ＆GT;
＆LT;链接rel =stylesheet属性HREF =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css＆GT;＆LT;！ - 可选主题 - ＆GT;
＆LT;链接rel =stylesheet属性HREF =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; DIV CLASS =容器NG-控制器=AppCtrl＆GT;
＆LT;表格的宽度=500BORDER =2CELLSPACING =2的cellpadding =2＆GT;
＆LT;形式为GT;
＆LT;＆TBODY GT;
＆所述; TR＆GT;
＆LT; TD＆GT;＆LT;输入类型=文件NG-文件选择=fileSelected（$文件）接受=图像/ *'＆GT;＆LT; / TD＆GT;
＆LT; TD＆GT;＆LT;输入类型=提交NG点击=一个UploadFile（）＆GT;＆LT; / TD＆GT;
＆LT; / TR＆GT; ＆LT; / TBODY＆GT;
＆LT; /表及GT;
＆LT; /表＆gt;
＆LT; / DIV＆GT;
＆所述; SCRIPT SRC =https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =controller.js＆GT;＆下; /脚本＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =../ bower_components / NG-文件上传-垫片/ NG-文件上传-shim.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =../ bower_components / NG-文件上传-垫片/ NG-文件upload.js＆GT;＆LT; / SCRIPT＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
＆LT;形式为GT;＆LT; /表及GT;
下面是指导文件控制器。
VAR对myApp = angular.module（'对myApp'，['angularFileUpload']）;myApp.controller（'AppCtrl'，['$范围，$ HTTP，上传，函数（$范围，$ HTTP，$上传）{
的console.log（你好世界从控制器）; $ scope.addData =功能（）
{
的console.log（$ scope.user）;
的console.log（妓女）;
$ http.post（'../ addData'，$ scope.user）.success（功能（响应）{
的console.log（响应）;
}）; $ scope.fileSelected =功能（文件） {
如果（文件和放大器;＆安培; files.length）{
$ scope.file =文件[0];
} $ upload.upload（{
网址：'../upload'，
文件：$ scope.file
}）
.success（功能（数据）{
的console.log（数据，上载）;
}）;
};
};}]）;
请忽略第一个功能，它是别的东西，但我的问题是另一回事。
现在这里是服务器code，其中我已经用multer这样的伎俩。
VAR前preSS =要求（'前preSS'）;
VAR应用=前preSS（）;
VAR猫鼬=要求（'猫鼬'）;
VAR multer =要求（'multer'）;
VAR验证=要求（'节点猫鼬-验证'）;
VAR bodyParser =要求（'身体分析器）
app.use（bodyParser.json（））;
app.use（bodyParser.urlen codeD（{延长：假}））
app.use（multer（{
DEST：./uploads/
}））;app.use（如press.static（__目录名称+'/公'））;
app.use（bodyParser.json（））;
服务器文件是非常大的，因此我不会将所有的路线和这里的所有部分。当我删除它有它运行没有错误，但是当我将它添加上载命令的部分，显示错误。
C：\\ nodefiles \\新\\ node_modules \\ EX preSS \\ lib目录\\ application.js中：209
抛出新的TypeError（'app.use（）需要中间件功能'）;
^
类型错误：app.use（）需要中间件功能
在EventEmitter.use（C：\\ nodefiles \\新\\ node_modules \\ EX preSS \\ lib目录\\ application.js中：209：11）
在对象＆LT;＆匿名GT; （C：\\ nodefiles \\新\\ server.js：9：5）
在Module._compile（module.js：460：26）
在Object.Module._extensions..js（module.js：478：10）
在Module.load（module.js：355：32）
在Function.Module._load（module.js：310：12）
在Function.Module.runMain（module.js：501：10）
在启动时（node.js的：129：16）
在Node.js的：814：3
multer（{DEST：./uploads /'}）本身不返回中间件功能。
你必须使用 multer的功能之一类来获得一个中间件的功能。
所以，你会使用它像 multer结束（{...}）。单（）。不同的功能这里描述的 - https://github.com/ex$p$pssjs/ multer＃singlefieldname 。
Multer商务部有权使用的好例子： https://github.com/前pressjs / multer＃使用
要保存一下，这里是一个充满工作的例子：
VAR multer =要求（'multer'）;
VAR上传= multer（{
DEST：__dirname +'/../../public/uploads/'，
}）;app.post（'/ API /数据，upload.single（'filenameInTheForm'），功能（REQ，资源，下一个）{
返回res.ok（）;
}）;
需要注意的是 filenameInTheForm 必须在的multipart / form-data的请求中的字段名称相匹配。
此外，还有使用 app.use（..）和上述方法略有区别。 app.use（）将导致每个端点执行的中间件，足够幸运，如果内容类型不是的multipart / form-data的中间件什么都不做。为了避免从它仍执行内容类型检查，这是更好的，以使用它作为在上面的例子中的事实轻微开销。
Please help me I'm new to this and for file upload I referred to this - http://goodheads.io/2015/06/22/handling-file-uploads-using-angularjs-node-and-express/
my implementation is given below. At place I have deleted things to make sure the post size is readable enough. The main problem is only file upload section other than that everything is working like a charm. Please help.
Here is the index.html section.
<!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>
Here is the controller that is guiding the file.
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');
});
};
};
}]);
Please ignore the first function it is for something else but my problem is something else.
Now here is the server code where I have used multer to do the trick.
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());
The server file is very big therefore I'm not adding all the routes and all section here. When I'm deleting the section which has the upload command it runs without error but when I am adding it, error is shown.
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
multer({dest: './uploads/'}) does not itself return a middleware function.
You have to use one of the functions of multer class to get a middleware function.
So you would end up using it like multer({...}).single(). The different functions are described here - https://github.com/expressjs/multer#singlefieldname.
Multer doc has good examples of the right usage: https://github.com/expressjs/multer#usage
To save a click, here is a full working example:
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();
});
Important to note that filenameInTheForm must match the field name in the multipart/form-data request.
Also, there is a slight difference in using app.use(..) and the way described above. app.use() will cause the middleware executed for every endpoint, lucky enough, if the content type is not multipart/form-data the middleware does nothing. To avoid slight overhead from the fact that it still performs the content type check, it is nicer to use it as in the example above.
这篇关于Angulas JS防爆preSS JS节点JS文件上传问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
