如何将angularjs中的文件和表单数据发送到node.js服务器？

Question

你好我正在创建视频上传表单的平均应用程序。我在一个地方，当我发送请求角js到我的api然后没有数据要去我的controller.Where我做错了吗？

<form ng-submit="uploadComplete(form)" enctype="multipart/form-data" id="myForm" ng-controller = "addCtrl"> 

<div class="form-group"> 
    <label >Title</label> 
    <input type="text" class="form-control" ng-model = "form.title" name="title" placeholder="Enter Title"> 
</div> 
<div class="form-group"> 
    <label >Description</label> 
    <textarea class="form-control" ng-model= "form.description" name ="description" rows="5" id="comment" placeholder="Enter Description"></textarea> 
</div> 
<div class="form-group"> 
    <label >Author</label> 
    <input type="text" class="form-control" ng-model = "form.author" name ="author" id="exampleInputPassword1" placeholder="Enter Author Name"> 
</div> 
<div class="form-group"> 
    <label >duration</label> 
    <input type="text" class="form-control" ng-model = "form.duration" name ="duration" id="exampleInputPassword1" placeholder="Enter duration Name"> 
</div> 
<div class="form-group"> 
    <label >ispublic</label> 
    <input type="text" class="form-control" ng-model = "form.public" name ="public" id="exampleInputPassword1" > 
</div> 



<input type="file" onchange="angular.element(this).scope().fileChanged(this)" id="userfile" name="userfile" multiple/> 


    <input type="submit" name="" value="submit"> 

我的角度控制器是

function addCtrl($scope, $filter, editableOptions,$http, editableThemes,$window,$uibModal, baProgressModal) { 
     $scope.fileChanged = function(elem){ 
     $scope.files = elem.files; 
     $scope.$apply(); 
     } 
    $scope.uploadComplete = function(f){ 

    $http({ 
    method: 'POST', 
    format: 'json', 
    url: '/api/add-video', 
    headers: { 
       'Content-Type': 'multipart/form-data' 
      }, 
    data: JSON.stringify({ 
     title: f.title, 
     description: f.description, 
     duration: f.duration, 
     author:f.author, 

     file:$scope.files, 
     ispublic:parseInt(f.public) 
    }), 
    transformRequest: function (data, headersGetter) { 
       var formData = new FormData(); 
       angular.forEach(data, function (value, key) { 
        formData.append(key, value); 
       }); 

       var headers = headersGetter(); 
       delete headers['Content-Type']; 

       return formData; 
      } 

    }) 
    .then(function(success) { 
    console.log("hit " + JSON.stringify(success)); 
    // $window.location.reload() 
    }, function(error) { 
    //console.log("not hit " + JSON.stringify(error)); 
    }); 

    } 
    console.log($scope.files[0].name); 
    console.log(parseInt(f.public)); 
    } 

    } 
    })(); 

和我的API/URL是服务器侧的一部分

app.post('/api/add-video', addVideoHandler); 
function addVideoHandler(req, res) { 

    var data = { 
    title: req.body.title, 
    description: req.body.description, 
    author: req.body.author, 
    duration: req.body.duration, 
    file: req.body.file, 
    ispublic: req.body.ispublic 
    } 
console.log(data); 

} 

我已经使用其中我没有”上面的URL文件中的所有节点包为什么我没有得到控制台中的所有数据，它显示：

{ title: undefined, 
    description: undefined, 
    author: undefined, 
    duration: undefined, 
    file: undefined, 
    ispublic: undefined } 

我在哪里做错了？ 请指导me.Thankyou

Answer 1

尝试使用指令如下

.directive('fileModel', ['$parse', function($parse) { 
     function fn_link(scope, element, attrs) { 
      var onChange = $parse(attrs.fileModel); 
      element.on('change', function (event) { 
       onChange(scope, { $files: event.target.files }); 
      }); 
     }; 
     return { 
      link: fn_link 
     } 
    }]) 

然后更换输入类型=文件

<input type="file" class="form-control" id="fileId" accept="image/*" file-model="myFiles($files)"/> 

，然后在您的控制器添加此

var formData = new FormData(); 
     $scope.myFiles = function($files) { 
      formData.append('img', $files[0]); 
} 

将'img'替换为您想要的名称后端 添加每在FORMDATA键每一个值发送 作为

formData.append('title', form.title); 
formData.append('description', form.description); 
formData.append('author', form.author); 
formData.append('duration', form.duration); 
formData.append('public', form.public); 

和你的$ HTTP方法

$http({ 
    method: 'POST', 
    url: '/api/add-video', 
    headers: { 
       'Content-Type': undefined 
      }, 
    data: **formData**), 

节点端 然后使用multer diskStorage为上传文件到服务器

var uploadMulter = multer.diskStorage({ 
    destination: function(req, file, callback) { 
     callback(null, "./UploadDir"); 
    }, 
    filename: function(req, file, callback) { 
     callback(null, Date.now() + path.extname(file.originalname)); 
    } 
}); 

var upload = multer({ storage: uploadMulter }); 

./UploadDir是要上传文件

目标文件夹，最后你的路由器

app.post('/api/add-video', upload.single('img'), addVideoHandler); 

现在如果你想上传一个文件使用 upload.single

（'IMG '） **或多次使用** upload.array（'img'，3）这里将会上传3个文件。随意更改。

这是我在计算器上的第一个答案:-)

如果目标目录UploadDir是无法访问的尝试

app.use('/UploadDir', express.static(path.join(__dirname, 'UploadDir'))) 

加入试试这个$ HTTP方法如果不工作

$http.post('/api/add-video',formData,{headers:{'Content-Type': undefined}}) 

Change you Controll呃作为

.controller('addCtrl', function($scope,$http){ 
var formData = new FormData(); 
$scope.myFiles = function($files) { 
    formData.append('img', $files[0]); 
    } 
$scope.uploadComplete= function(form){ 
    formData.append('title', form.title); 
    formData.append('description', form.description); 
    formData.append('author', form.author); 
    formData.append('duration', form.duration); 
    formData.append('public', form.public); 
    $http.post('/api/add-video',formData,{headers:{'Content-Type': undefined}}).then(function(res){ 
    alert("Correctly Done") 
    }, function(err){ 
    alert("Error check console in browser"); 
    console.log(err) 
    }) 
    } 
})