使用Node.js、Multer和AngularJS进行上传而无需重定向

Question

我正在使用Nodejs + Multer + angularjs来上传文件到服务器。

我有一个简单的HTML文件：

<form action="/multer" method="post" enctype="multipart/form-data">
<input type="file" id="photo" name="photo"/> 
<button id="Button1">Upload</button>
</form>

Nodejs部分：

var multer  = require('multer');

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

app.post('/multer', upload.single('photo'), function (req, res) {
    res.end("File uploaded.");
});

这很完美地工作，文件已成功上传。

但是在上传文件后，由于表单元素的原因，它将我重定向到"/multer"。
如何留在同一页上？..可能使用angularjs
所以我尝试了这个：

制作一个 HTML 的 angular 文件：

<section data-ng-controller="myCtrl">
<input type="file" id="photo" name="photo"/> 
<button id="Button1" ng-click="f()">Upload</button>
</section>

一个 AngularJS 控制器：

angular.module('users').controller('myCtrl',[$scope,function($scope){
    $scope.f=function(){
        var photo = document.getElementById('photo');
        var file = photo.files[0];
        if (file) {

            //code to make a post request with a file object for uploading?????

            //something like..
            //$http.post('/multer', file).success(function(response) {
            //console.log("success");
            //});
        }
    }
}]);

有人能帮我编写一个使用AngularJS控制器和Multar上传文件的POST请求代码吗？

谢谢

- Gaurav Gupta

---

你找到任何解决方案了吗？ - Simran Kaur

@SimranKaur 是的，我找到了解决方案 :) - Gaurav Gupta

@SimranKaur 我已经发布了答案。 - Gaurav Gupta

嗨@GauravGupta，我遇到了同样的问题。请帮助我节省时间。 - Sunny

Answer 1

AngularJS指令：

angular.module('users').directive('fileModel', ['$parse', function ($parse) {
return {
    restrict: 'A',
    link: function(scope, element, attrs) {
        var model = $parse(attrs.fileModel);
        var modelSetter = model.assign;

        element.bind('change', function(){
            scope.$apply(function(){
                modelSetter(scope, element[0].files[0]);
            });
        });
    }
};
}]);

Angular HTML 文件：

<input type="file" file-model="myFile"/><br><br>
<button ng-click="uploadFile()">Upload</button>

AngularJS 控制器：

$scope.uploadFile = function(){

        var file = $scope.myFile;
        var uploadUrl = "/multer";
        var fd = new FormData();
        fd.append('file', file);

        $http.post(uploadUrl,fd, {
            transformRequest: angular.identity,
            headers: {'Content-Type': undefined}
        })
        .success(function(){
          console.log("success!!");
        })
        .error(function(){
          console.log("error!!");
        });
    };

Node.js服务器路由文件：

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

app.post('/multer', upload.single('file'));

享受！

- Gaurav Gupta

---

对于这个 "fd.append('file', file)" 和这个 "upload.single('file')"，非常感谢！ - dimpiax

在终端中出现了 {错误：未找到：POST /multer}，并且在浏览器调试器中出现了 {POST XHR https://..../multer [HTTP/1.1 404 Not Found 220ms]}，我该如何解决这个问题？ - nolags

你能告诉我这段Nodejs服务器路由文件代码将被添加到哪里吗？因为我对angularjs不熟悉，不理解这一部分。 - Priyanka Ahire

@nolags 尝试将在 app.js 中的更改放在开头，就在定义 app 之后。大多数情况下，您会在错误处理程序之后进行更改。 - maicalal

感谢您提供的解决方案。已成功集成到使用Angular-Fullstack-Generator和Yeoman生成的项目中。 将其添加到相关API的控制器中。 - Pi Home Server

如何在Angular中使用相同的代码进行多文件上传？ - ashish naghate