Question

我正在尝试设计一个简单的应用程序来将文件上传到服务器。前端在Jade视图引擎中使用AngularJS，后端是用Nodejs编写的Express服务器。

我正在使用ng-file-upload，但问题是文件上传模块提供的上传服务需要一个Url目标来上传文件。无论我在这个目的地放置什么，我的应用程序都会给我404错误找不到。我不知道如何以不产生404错误的方式为ng-file-upload提供目标文件夹。

这是我上传的控制器：

var app = angular.module('fileUpload', ['ngFileUpload']);

app.controller('MyCtrl', ['$scope', 'Upload', '$timeout', function($scope, Upload, $timeout) {
    $scope.uploadFiles = function(file, errFiles) {
        $scope.f = file; //set the global scope file to 'file'
        $scope.errFile = errFiles & errFiles[0]; //check if any invalid filed exist
        if (file) { //check if a file was submitted
            file.upload =   Upload.upload({
                                url: 'http://localhost:3000/upload',
                                data: { file: file }
                            });

            file.upload.then(
                function(response) {
                    $timeout(function () {
                        file.result = response.data;
                    });
                },
                function(response) {
                    if (response.status > 0) {
                        $scope.errorMsg = response.status + ': ' + response.data;
                    }
                },
                function(evt) {
                    file.progress = Math.min(100, parseInt(100.0 * (evt.loaded / evt.total)));
                }
            );
        }
    }
}]);

这是我的玉模板：

extends layout

block content
  h1= title
  button(type='file', ngf-select='uploadFiles($file, $invalidFiles)', accept='.csv') 
    | Select File to Upload
  br
  br
  | File:
  div(style='font:smaller')
    | {{f.name}} {{errFile.name}} {{errFile.$error}} {{errFile.$errorParam}}
    span.progress(ng-show='f.progress >= 0')
      div(style='width:{{f.progress}}%', ng-bind="f.progress + '%'")

我的快递服务器app.js，其中包括multer作为中间件：

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var multer = require('multer');

var routes = require('./routes/index');
var users = require('./routes/users');

var app = express();

var storage =   multer.diskStorage({
                    destination: function (req, file, cb) {
                        cb (null, './uploads/');
                    },
                    filename: function (req, file, cb) {
                        var datetimestamp = Date.now();
                        cb (null, (file.originalname + 'datetimestamp'));
                    }
                });

var upload = multer({ storage: storage }).any();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));

/*app.use(function(req, res, next) {
        res.setHeader("Access-Control-Allow-Methods", "POST, PUT, OPTIONS, DELETE, GET");
        res.header("Access-Control-Allow-Origin", "http://localhost");
        res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
        next();
    });*/

app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/bower_components', express.static(path.join(__dirname, 'bower_components')));
app.use(express.static('../client'));

app.use('/', routes);
app.use('/users', users);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handlers

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
  app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
      message: err.message,
      error: err
    });
  });
}

// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
  res.status(err.status || 500);
  res.render('error', {
    message: err.message,
    error: {}
  });
});

app.post('/upload', function (req, res) {
    upload(req, res, function(err) {
        if (err) {
            res.json({ error_code: 1, err_desc: err });
            return;
        }
        res.json({ error_code: 0, err_desc: null });
    });
});

module.exports = app;

任何想法如何给角度模块一个服务器端文件夹，它可以存储文件？

文件上传与前端AngularJS和Jade，后端Nodejs

0 个答案: