取消选择上传文件会导致 ng-file-upload 中的文件索引出现问题

Question

下面html用于select一些图片上传

<input type="file" id="files" ngf-select="select(files)" ng-model="files" name="file" accept="image/*" ngf-max-size="'2MB'" required ngf-multiple="true">

我正在使用以下 html 将 selected 图像显示为缩略图，并带有一个按钮以在上传它们之前取消 selected 文件。

<div ng-repeat="f in files track by $index">
      <div ng-show="f.type.indexOf('image') > -1">    
      <img ngf-src="f" class="thumb">

          <button class= "btn btn-warning btn-cancel" ng-disabled="!myForm.$valid" 
              ng-click="cancelPic($index)">Cancel</button> 

          <br><br>
          <p>{{f.name}}</p>
          <br>
          <span class="progress" ng-show="f.progress >= 0">
            <div style="width:{{f.progress}}%" 
                  ng-bind="f.progress + '%'"></div>
          </span>
          <hr>
      </div>    
      </div>

在控制器中单击取消按钮时：

$scope.cancelPic = function(index) {

        $scope.files[index] = undefined;

        //$scope.files.length--;
      }

这可以删除 selected 图像及其取消按钮（通过 ng-show）。问题是什么时候上传文件，这里是上传函数

$scope.uploadPic = function(files) {
      for(var i = 0; i < $scope.files.length; i++) {
        var $file = $scope.files[i];
        (function(index) {
          $scope.upload[index] = Upload.upload({
            url: '/',
            method: 'POST',
            file: $file,
          }).progress(function (evt) {
              //error here
              $scope.files[index].progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
          }).then(function (response) {
            $timeout(function () {
            $file.result = response.data;
          });
          }, function (response) {
            if (response.status > 0)
            $scope.errorMsg = response.status + ': ' + response.data;
          });
          })(i);

          }
        }
      }]);

出现以下错误：

TypeError: Cannot set property 'progress' of undefined
    at userCtrl.js:58

这是有错误的行：

$scope.files[index].progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total));

cancelPic 函数不会更改索引值，如果 selected 了 3 个文件并且使用 cancelPic 删除了一个文件，则索引值仍然是 3。我添加了一行来减少 files.length 为：

$scope.files.length--;

这确实将索引减少到 2，但我仍然得到像以前一样的错误加上当使用 cancelPic 删除一个文件时两个从 selected 文件中删除？我对那个有点不解。

我认为cancelPic函数的逻辑有问题。

Answer 1

要从数组中删除索引，您应该使用 splice 函数。所以这应该可以为您解决：

$scope.cancelPic = function(index) {
   $scope.files.splice(index,1);
   $scope.files = $scope.files.slice(0);    
}

第二行是更改 $scope.files 对象值，以便 angular 触发验证。仅使用第一行不会触发 $scope.$watch('files').

取消选择上传文件会导致 ng-file-upload 中的文件索引出现问题

Deselecting an upload file causes problems with files indexing in ng-file-upload

ng-file-upload