使用AngularJs主题角度进行文件上传

时间:2016-12-19 22:32:55

标签: angularjs

所以我使用了Angle主题提供的Filer Uploader:URL

通过使用提供的代码,我已成功上传了一张图片,但当我尝试在同一页面上实现两个上传时,我只成功保存了一张图片。我提到初始代码不是由我编写的,我无法完全理解它。 HTML:

<input name="logo" ng-model="shop.settings.logo" filestyle="" type="file" data-button-text="Browse" data-class-button="btn btn-default" data-classinput="form-control inline" nv-file-select="" uploader="form.uploader" class="form-control" />
<input name="banner" ng-model="shop.settings.banner" filestyle="" type="file" data-button-text="Browse" data-class-button="btn btn-default" data-classinput="form-control inline" nv-file-select="" uploader="form.uploader" class="form-control" />

角度控制器:

if($scope.form.uploader.queue.length != 0)
                    {
                        uploader.uploadItem($scope.form.uploader.queue[0]);
                        uploader.onCompleteItem = function(fileItem, response, status, headers) {
                            $scope.shop.settings.logo = response.file.url.split('/')[response.file.url.split('/').length - 1];
                        };
                        uploader.uploadItem($scope.form.uploader.queue[1]);
                        uploader.onCompleteItem = function(fileItem, response, status, headers) {
                            $scope.shop.settings.banner = response.file.url.split('/')[response.file.url.split('/').length - 1];

                        };
                        uploader.onCompleteAll= function() {
                            TestService.saveTest($scope.shop).then(function(response) {
                                    angular.forEach(response.data.errors, function (value, key) {
                                        Notify.alert(value, {status: 'danger', timeout: 1000});
                                    });                               
                                $scope.formSubmitted = false;
                            })
                        };
                    }

我只得到$scope.shop.settings.banner 欢迎任何想法和帮助!谢谢你的时间。

1 个答案:

答案 0 :(得分:0)

你正在覆盖

  

uploader.onCompleteItem

处理横幅的秒函数会覆盖它。

更新:回答它是如何完成的。由于我没有开始使用或知道库及其版本,我将不得不放置通用解决方案,以提供概念和实际工作中的答案。

尝试一下以下内容: -

选项1

    uploader.onCompleteItem = function(fileItem, response, status, headers) {
        if (fileItem == SOME PROPERTY THAT IDENTIFIES LOGO)   {
            // do something with logo $scope.shop.settings.logo 

       } 
        if (fileItem == SOME CONDITION THAT IDENTIFIES BANNER)   {
            // do something with logo $scope.shop.settings.banner

       } 

    };
    uploader.uploadItem($scope.form.uploader.queue[0]);
    uploader.uploadItem($scope.form.uploader.queue[1]);

选项2

    var logoFileItem = $scope.form.uploader.queue[0];
    logoFileItem.onSuccess= function(response, status, headers) {
        //do something regarding logo
    }; 

    var bannerFileItem = $scope.form.uploader.queue[1];
    bannerFileItem .onSuccess= function(response, status, headers) {
        //do something regarding banner
    };
    uploader.uploadItem(logoFileItem);
    uploader.uploadItem(bannerFileItem);