html post后404,javascript - POST http://localhost:3000/ 404 (Not Found) - Stack Overflow

I'm working on web file browser with upload function. I'm using Angular File Upload directive and angular web file browser.

First off I've downloaded file web browser and configured it.

Second I've downloaded file upload directive and did everything step by step and my page works perfect

PWYds.png

but when I'm trying to upload something I'm getting

FileUploader.js:479 POST http://localhost:3000/ 404 (Not Found)

I understand that FileUploader.js can't find upload.php file, but I put it to the root folder and provided path:

var uploader = $scope.uploader = new FileUploader({

url: 'upload.php'

});

this is how it looks:

4Czn7.png

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();

}

}

})

;

}());

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;

}());

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:

Select files

Upload queue

Queue length: {{ uploader.queue.length }}

NameSizeProgressStatusActions

{{ item.file.name }}{{ item.file.size/1024/1024|number:2 }} MB

Upload

Cancel

Remove

Queue progress:

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;

}());

Where is my mistake? I appreciate any help.

I used this example and take out my upload.php at all, fixed server/app.j s and controller.js , but still getting same error

Updated

I put this code into 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");

});

});

Now post returns 200, but nothing appears in folder "upload". Are there any ideas, what's wrong now?

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值