POST http：// localhost：3000/404（Not Found）（已更新）

我正在使用上传function在networking文件浏览器上工作。 我正在使用Angular File Upload指令和angular度网页文件浏览器 。

首先，我已经下载了文件Web浏览器并进行了configuration。

其次，我已经下载了file upload指令，并且一步一步完成了所有的工作，而且我的页面完美无缺

但是当我试图上传我得到的东西

FileUploader.js：479 POST http：// localhost： 3000/404（Not Found）

我明白，FileUploader.js找不到upload.php文件，但我把它放到根文件夹，并提供path：

var uploader = $scope.uploader = new FileUploader({ url: 'upload.php' }); 

这是它的外观：

angular/ app.js：

 (function() { 'use strict'; window.app = angular.module('fileBrowserApp', ['ngRoute', 'jsTree.directive', 'angularFileUpload']). config(['$routeProvider', function($routeProvider) { $routeProvider. when('/', { templateUrl: '../partials/home.html', controller: 'HomeCtrl' }). otherwise({ redirectTo: '/home' }); } ]); window.app.directive('attachable', function(FileUploader) { return { restrict: 'E', replace: true, templateUrl:'../partials/upload.html', link: function(scope, element, attrs) { scope.uploader = new FileUploader(); } } }) ; }()); 

服务器/ app.js

  (function() { 'use strict'; var express = require('express'); var path = require('path'); var logger = require('morgan'); var cookieParser = require('cookie-parser'); var bodyParser = require('body-parser'); var fs = require('fs-extra'); var routes = require('./routes.js'); var app = express(); // view engine setup app.set('views', path.join(__dirname, 'views')); app.engine('html', require('ejs').renderFile); app.set('view engine', 'html'); app.use(logger('dev')); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: true })); app.use(cookieParser()); app.use(express.static(path.join(__dirname, '../client'))); app.use('/', routes); app.set('port', process.env.PORT || 3000); var server = app.listen(app.get('port'), function() { console.log('Express server listening on port ' + server.address().port); }); module.exports = app; }()); 

angular/ controller.js

 (function() { 'use strict'; app.controller('HomeCtrl', ['$scope', 'FetchFileFactory', 'FileUploader', function($scope, FetchFileFactory, FileUploader, $upload) { // ****** file upload ******* var uploader = $scope.uploader = new FileUploader({ url: '/upload', success: function (fileItem) { $scope.alerts.push({ type: 'success', msg: '"' + fileItem.file.name + '" uploaded' }); }, error: function (fileItem) { $scope.alerts.push({ type: 'danger', msg: '"' + fileItem.file.name + '" failed' }); } }); // FILTERS uploader.filters.push({ name: 'customFilter', fn: function(item /*{File|FileLikeObject}*/, options) { return this.queue.length < 10; } }); // CALLBACKS uploader.onWhenAddingFileFailed = function(item /*{File|FileLikeObject}*/, filter, options) { console.info('onWhenAddingFileFailed', item, filter, options); }; uploader.onAfterAddingFile = function(fileItem) { console.info('onAfterAddingFile', fileItem); }; uploader.onAfterAddingAll = function(addedFileItems) { console.info('onAfterAddingAll', addedFileItems); }; uploader.onBeforeUploadItem = function(item) { console.info('onBeforeUploadItem', item); }; uploader.onProgressItem = function(fileItem, progress) { console.info('onProgressItem', fileItem, progress); }; uploader.onProgressAll = function(progress) { console.info('onProgressAll', progress); }; uploader.onSuccessItem = function(fileItem, response, status, headers) { console.info('onSuccessItem', fileItem, response, status, headers); }; uploader.onErrorItem = function(fileItem, response, status, headers) { console.info('onErrorItem', fileItem, response, status, headers); }; uploader.onCancelItem = function(fileItem, response, status, headers) { console.info('onCancelItem', fileItem, response, status, headers); }; uploader.onCompleteItem = function(fileItem, response, status, headers) { console.info('onCompleteItem', fileItem, response, status, headers); }; uploader.onCompleteAll = function() { console.info('onCompleteAll'); }; console.info('uploader', uploader); // ****** file browser ******* $scope.fileViewer = 'Please select a file to view its contents'; $scope.tree_core = { multiple: false, // disable multiple node selection check_callback: function (operation, node, node_parent, node_position, more) { // operation can be 'create_node', 'rename_node', 'delete_node', 'move_node' or 'copy_node' // in case of 'rename_node' node_position is filled with the new node name if (operation === 'move_node') { return false; // disallow all dnd operations } return true; // allow all other operations } }; $scope.nodeSelected = function(e, data) { var _l = data.node.li_attr; if (_l.isLeaf) { FetchFileFactory.fetchFile(_l.base).then(function(data) { var _d = data.data; if (typeof _d == 'object') { //http://stackoverflow.com/a/7220510/1015046// _d = JSON.stringify(_d, undefined, 2); } $scope.fileViewer = _d; }); } else { //http://jimhoskins.com/2012/12/17/angularjs-and-apply.html// $scope.$apply(function() { $scope.fileViewer = 'Please select a file to view its contents'; }); } }; } ]); }()); 

Upload.html：

 <div ng-if="uploader"> <div class="container"> <div class="row"> <div class="col-md-3"> <h3>Select files</h3> <input type="file" nv-file-select="" uploader="uploader"/> </div> <div class="col-md-9" style="margin-bottom: 40px"> <h3>Upload queue</h3> <p>Queue length: {{ uploader.queue.length }}</p> <table class="table"> <thead> <tr> <th width="50%">Name</th> <th ng-show="uploader.isHTML5">Size</th> <th ng-show="uploader.isHTML5">Progress</th> <th>Status</th> <th>Actions</th> </tr> </thead> <tbody> <tr ng-repeat="item in uploader.queue"> <td><strong>{{ item.file.name }}</strong></td> <td ng-show="uploader.isHTML5" nowrap>{{ item.file.size/1024/1024|number:2 }} MB</td> <td ng-show="uploader.isHTML5"> <div class="progress" style="margin-bottom: 0;"> <div class="progress-bar" role="progressbar" ng-style="{ 'width': item.progress + '%' }"></div> </div> </td> <td class="text-center"> <span ng-show="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span> <span ng-show="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span> <span ng-show="item.isError"><i class="glyphicon glyphicon-remove"></i></span> </td> <td nowrap> <button type="button" class="btn btn-success btn-xs" ng-click="item.upload()" ng-disabled="item.isReady || item.isUploading || item.isSuccess"> <span class="glyphicon glyphicon-upload"></span> Upload </button> <button type="button" class="btn btn-warning btn-xs" ng-click="item.cancel()" ng-disabled="!item.isUploading"> <span class="glyphicon glyphicon-ban-circle"></span> Cancel </button> <button type="button" class="btn btn-danger btn-xs" ng-click="item.remove()"> <span class="glyphicon glyphicon-trash"></span> Remove </button> </td> </tr> </tbody> </table> <div> <div> Queue progress: <div class="progress" style=""> <div class="progress-bar" role="progressbar" ng-style="{ 'width': uploader.progress + '%' }"></div> </div> </div> <!--<button type="button" class="btn btn-success btn-s" ng-click="uploader.uploadAll()" ng-disabled="!uploader.getNotUploadedItems().length">--> <!--<span class="glyphicon glyphicon-upload"></span> Upload all--> <!--</button>--> <!--<button type="button" class="btn btn-warning btn-s" ng-click="uploader.cancelAll()" ng-disabled="!uploader.isUploading">--> <!--<span class="glyphicon glyphicon-ban-circle"></span> Cancel all--> <!--</button>--> <!--<button type="button" class="btn btn-danger btn-s" ng-click="uploader.clearQueue()" ng-disabled="!uploader.queue.length">--> <!--<span class="glyphicon glyphicon-trash"></span> Remove all--> <!--</button>--> </div> </div> </div> </div> </div> 

route.js

 (function() { 'use strict'; var express = require('express'); var router = express.Router(); var fs = require('fs'); var path = require('path'); /* GET home page. */ router.get('/', function(req, res) { res.render('index'); }); /* Serve the Tree */ router.get('/api/tree', function(req, res) { var _p; if (req.query.id == 1) { _p = path.resolve(__dirname, '..', 'node_modules'); processReq(_p, res); } else { if (req.query.id) { _p = req.query.id; processReq(_p, res); } else { res.json(['No valid data found']); } } }); /* Serve a Resource */ router.get('/api/resource', function(req, res) { res.send(fs.readFileSync(req.query.resource, 'UTF-8')); }); function processReq(_p, res) { var resp = []; fs.readdir(_p, function(err, list) { for (var i = list.length - 1; i >= 0; i--) { resp.push(processNode(_p, list[i])); } res.json(resp); }); } function processNode(_p, f) { var s = fs.statSync(path.join(_p, f)); return { "id": path.join(_p, f), "text": f, "icon" : s.isDirectory() ? 'jstree-custom-folder' : 'jstree-custom-file', "state": { "opened": false, "disabled": false, "selected": false }, "li_attr": { "base": path.join(_p, f), "isLeaf": !s.isDirectory() }, "children": s.isDirectory() }; } module.exports = router; }()); 

我的错误在哪里？ 我感谢任何帮助。

我用这个例子 ，拿出我的upload.php，固定的server / app.js和controller.js，但仍然得到相同的错误

更新

我把这个代码放到routes.js中

 var multer = require('multer'); var storage = multer.diskStorage({ destination: function (req, file, callback) { callback(null, './upload'); }, filename: function (req, file, callback) { callback(null, file.fieldname + '-' + Date.now()); } }); var upload = multer({ storage : storage}).single('test'); router.post('/',function(req,res){ upload(req,res,function(err) { if(err) { return res.end("Error uploading file."); } res.end("File is uploaded"); }); }); 

现在发布返回200，但没有任何内容出现在文件夹“上传”。 有什么想法，现在有什么问题吗？

Answer 1

错误是POST http://localhost:3000/ 404 (Not Found)

你没有一个邮政路线/

你可以像这样创build一个：

router.post('/', function(req, res) { // do something w/ req.body or req.files });

而且，我build议使用express或upload.php

要使用快递，您还需要更新您的angular度FileUploaderurl