POST http:// localhost:3000/404(未找到)

安东

我正在使用具有上传功能的网络文件浏览器。我正在使用Angular File Upload指令和angular Web文件浏览器

首先,我下载了文件Web浏览器并对其进行了配置。

其次,我下载了文件上传指令,并逐步进行了所有操作,我的页面运行完美

在此处输入图片说明

但是当我尝试上传内容时

FileUploader.js:479 POST http:// localhost: 3000/404(未找到)

我了解FileUploader.js找不到upload.php文件,但我将其放在根文件夹中并提供了路径:

  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,但文件夹“上载”中没有任何内容。有什么想法,现在怎么了?

披肩

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

您没有发布路线 /

您可以这样创建一个:

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

但同时,我建议使用任何明示或upload.php的

要使用express,您还需要更新您的角度FileUploader网址

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Angular 8:POST http:// localhost:4200 / assets / data / students.json 404(未找到)

来自分类Dev

GET http:// localhost:3000/404(未找到),实际上是在拨打POST却获得GET

来自分类Dev

GET http://localhost:5000/error 404 (未找到)

来自分类Dev

未找到 Http 404

来自分类Dev

(404未找到)正在加载http:// localhost:4200 / angular2-datatable / datatable

来自分类Dev

GET http:// localhost:3000 / components / t.mp3 net :: ERR_ABORTED 404(未找到)

来自分类Dev

(404未找到)正在加载http:// localhost:4200 / angular2-datatable / datatable

来自分类Dev

<未定义:1 GET http:// localhost:63342 / Twitchtv /未定义404(未找到)>

来自分类Dev

GET http://localhost:4200/src/app/ficheros/nacionalidades.json 404(未找到)

来自分类Dev

处理未找到的 Http 请求

来自分类Dev

如何在localhost(* Windows *不是Unix)上模拟HTTP POST?

来自分类Dev

POST http://localhost:3000/signin 400 (Bad Request) in react

来自分类Dev

找到多个与请求http post方法匹配的操作

来自分类Dev

找到多个与请求http post方法匹配的操作

来自分类Dev

AJAX损坏,POST路由404(未找到)

来自分类Dev

HTTP错误404.13-未找到

来自分类Dev

PHP:SOAP-未找到返回的HTTP

来自分类Dev

HTTP Post登录失败

来自分类Dev

Django HTTP POST错误

来自分类Dev

角度HTTP POST请求

来自分类Dev

Android HTTP-POST

来自分类Dev

Ruby Http Post参数

来自分类Dev

Http服务POST

来自分类Dev

POST HTTP 409冲突

来自分类Dev

使用HTTP POST的HTTPS

来自分类Dev

Http Post中的错误

来自分类Dev

HTTP POST请求问题

来自分类Dev

PHP未找到使用FOSRestBundle进行POST的路由

来自分类Dev

Http POST方法有时会转到test.com而不是localhost

Related 相关文章

热门标签

归档