Question

我第一次使用ng-file-upload。我有2个按钮，一个用于单个图像，一个用于多个文件。当我使用1个按钮时，它会覆盖我从另一个按钮上传的文件。如何将其添加到列表而不是覆盖？

<!-- UPLOAD FILES BUTTON -->
<a class="waves-effect waves-light btn col l2 m2 bluebut"
  style="margin-left: 50px;"
  id="upbut"
  ngf-select="uploadFiles($files, $invalidFiles)"
  multiple
  accept="image/*"
  ngf-max-size="50MB">UPLOAD FILE(S)</a>
<label for="upbut" id="label-add-pat">Attach File(s)</label>

<!-- UPLOAD PROFILE PIC -->
<a class="waves-effect waves-light btn col m2 l2 bluebut"
   style="margin-left: 53px;"
   id="uppicbut"
   ngf-select="uploadFiles($files, $invalidFiles)"
   ng-model="picFile"
   accept="image/*">UPLOAD PROFILE PICTURE
</a>
<label for="uppicbut" id="label-pic-pat">Upload a Profile Picture</label>

<!-- FILE STUFF -->
<br><br>
<ul>
  <li ng-repeat="f in files" style="font:smaller; margin-left: 51px;">{{f.name}} {{f.$errorParam}}
    <span class="progress" ng-show="f.progress >= 0">
      <div style="width:{{f.progress}}%"
          ng-bind="f.progress + '%'"></div>
    </span>
  </li>
  <li ng-repeat="f in errFiles" style="font:smaller">{{f.name}} {{f.$error}} {{f.$errorParam}}
  </li>
</ul>
{{errorMsg}}
<!-- END FILE STUFF -->

---_ EDIT -------- 控制器：

    $scope.uploadFiles = function(files, errFiles) {
        $scope.files = files;
        $scope.errFiles = errFiles;
        angular.forEach(files, function(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));
            });
        });
    }

Answer 1

现在的问题是，每次运行uploadFiles事件时都要重置$ scope.files。

您需要在uploadFiles函数之外设置$ scope.files = []。

在uploadFiles中，将文件追加到$ scope.files数组。这样，新文件将被添加而不会被覆盖。

$scope.files = []
$scope.uploadFiles = function(files, errFiles) {
        files.forEach(function(e){$scope.files.push(e)})
        $scope.errFiles = errFiles;
        angular.forEach(files, function(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));
            });
        });

        }

    }

此外，您可能希望检查uploadFiles中的某个位置，即同一文件的上传次数不超过1次。如果您尝试重复具有完全相同名称的元素，则Angular ng-repeat将引发错误。

ng-file-upload多个上传以添加到同一列表

1 个答案: