Question

我有一个简单的表格

<div ng-controller='MyCtrl'>
 <form ng-submit='submit()'>
    <input name="name" value="name">
    <lf-ng-md-file-input lf-files='files'> </lf-ng-md-file-input>
    <button type='submit'> Submit
 </form>
</div>

我使用此html元素在客户端选择文件：https://github.com/shuyu/angular-material-fileinput。

如何访问我的上传文件以将其发送到服务器上？

Answer 1

我建议使用Ng-File-upload这样做可以做到这一点，网站上有更多文档以及不同示例的小提琴

//inject angular file upload directives and services.
var app = angular.module('fileUpload', ['ngFileUpload']);

app.controller('MyCtrl', ['$scope', 'Upload', '$timeout', function ($scope, Upload, $timeout) {
    $scope.uploadFiles = function(file, errFiles) {
    $scope.f = file;
    $scope.errFile = errFiles && errFiles[0];
    if (file) {
        file.upload = Upload.upload({
            url: 'https://angular-file-upload-cors-srv.appspot.com/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));
        });
    }   
  }
}]);

控制器：

display(ang_beta)

Answer 2

嗨〜抱歉，我没有清楚地说明lf-ng-md-file-input。

这个角度指令专注于基于ajax的make material look和upload file。

所以最重要的是你需要自己从“lf-files”数据绑定中获取文件，而不是输入元素，因为它在每次解析文件后都会清除。

“lf-files”数据是一个数组变量，数组中的对象包含来自解析输入文件的lfFileName（文件名），lfFile（文件对象）和lfDataUrl（用于预览）的属性。

您可以使用$ watch来观察“lf-files”。

html：

<lf-ng-md-file-input lf-files='files' multiple> </lf-ng-md-file-input>

javascript：

app.controller('MyCtrl',function($scope){
    $scope.$watch('files.length',function(newVal,oldVal){
        console.log($scope.files);
    });
});

因此，在完成选择文件后，您需要调整以下数据以适合您的服务器端。

javascript：

app.controller('MyCtrl',function($scope){

    ...

    $scope.onSubmit = function(){
        var formData = new FormData();
        angular.forEach($scope.files,function(obj){
            formData.append('files[]', obj.lfFile);
        });
        $http.post('./upload', formData, {
            transformRequest: angular.identity,
            headers: {'Content-Type': undefined}
        }).then(function(result){
            // do sometingh                   
        },function(err){
            // do sometingh
        });
    };

    ...

});

在我的情况下，我在服务器端使用node.js（express + formidable），“Formidable”是用于解析表单数据的节点模块，还有其他类似的“Multer”。

服务器：

var express = require('express');
var formidable = require('formidable');
var app = express();
app.use(express.static(__dirname + '/public'));

...

app.post('/upload',function(req,res){
    var form = new formidable.IncomingForm();
    form.uploadDir = __dirname +'/public/uploads';
    //file upload path
    form.parse(req, function(err, fields, files) {
        //you can get fields here
    });
    form.on ('fileBegin', function(name, file){
        file.path = form.uploadDir + "/" + file.name;
        //modify file path
    });
    form.on ('end', function(){
        res.sendStatus(200);
        //when finish all process    
    });
});

...

我希望这会有所帮助。

上传文件角度

2 个答案: