Md文件输入不会附加在AngularJS中的formData中

时间:2016-12-02 07:37:55

标签: javascript angularjs upload append multipartform-data

在一个Anggular网络应用程序中,我有一个表单。我想更新一个文件,所以我使用了lf-ng-md-file-input。这是简单的html:

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

在我的控制器中,我这样做了:

let formData = new FormData();
angular.forEach(this.$scope.files,function(obj){
   formData.append('files[]', obj.lfFile);
});

调试它,我看到obj.lfFile存在:

lastModified:1473694273813
lastModifiedDate:Mon Sep 12 2016 17:31:13 GMT+0200 (ora legale Europa occidentale)
name:"test.jpg"
size:39790
type:"image/jpeg"
webkitRelativePath:""

问题是它不会将文件附加到我的formData中。循环后它仍然是空的。为什么呢?

1 个答案:

答案 0 :(得分:1)

我为此写了一个指令,也许它会帮助你:

指令:

angular.module('content')
    .directive('parFiles', files);

/* @ngInject */
function files($parse, $timeout) {

    var directive = {
        link: link,
        restrict: 'A'
    };

    return directive;

    function link(scope, element, attr) {
        var fn = $parse(attr['pirFiles']);

        element.bind('change', function (evt) {
            var files = [], fileList, i;
            fileList = evt.target.files;
            if (fileList != null) {
                for (i = 0; i < fileList.length; i++) {
                    files.push(fileList.item(i));
                }
            }
            $timeout(function () {
                fn(scope, {
                    $files: files,
                    $event: evt
                });
            });
        });
    }
}

查看:

 <input type="file"
        class="input-list__item"
        ng-disabled="dr.isFileUploaded"
        par-files="dr.addFiles($files)"
        required />

控制器:

function addFiles(files) {
    vm.files = files;
}