POST http: // localhost: 3000/404 (nicht gefunden) (aktualisiert)

Question

Ich arbeite an Web-Datei-Browser mit Upload-Funktion. Ich verwende Angular File Upload Direktive und angular web file browser.

Zuerst habe ich Datei Webbrowser heruntergeladen und konfiguriert.

Zweitens habe ich Direktive Datei-Upload heruntergeladen und tat alles, Schritt für Schritt und meine Seite funktioniert perfekt

aber wenn ich versuche, etwas zu laden Ich erhalte

FileUploader.js: 479 POST http://localhost:3000/ 404 (nicht gefunden)

ich verstehe, dass F ileUploader.js nicht finden können, upload.php Datei, aber ich habe es in den Stammordner und bereitgestellt Pfad:

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

dies ist, wie es aussieht:

Winkel/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(); 
      } 
     } 
    }) 
    ; 
}()); 

server/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; 
}()); 

Winkel/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; 

}()); 

Wo ist mein Fehler? Ich schätze jede Hilfe.

ich verwendet, um dieses example und meine upload.php überhaupt nehmen, festen Server/app.js und controller.js, aber immer noch denselben Fehler

Aktualisiert

ich diesen Code setzen einlassen 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"); 
    }); 
}); 

Jetzt Post 200 zurückgibt, aber nichts erscheint im Ordner "Upload". Gibt es irgendwelche Ideen, was ist jetzt los?

Answer 1

Der Fehler ist POST http://localhost:3000/ 404 (Not Found)

Sie haben noch einen Beitrag Route für /

Sie ein wie so erstellen:

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

Aber auch ich empfehlen entweder express oder upload.php

Um Express zu verwenden, müssen Sie Ihre eckige FileUploader-URL auch aktualisieren