javascript - Angular ng-file-upload 删除

Question

尝试找出在使用 ng-file-upload 时能够删除文件的最佳方法。我得到了带有列表的文件列表。我的 html 是:

<div>
    <p>Files:</p>
</div>
<div>
    <ul>
        <li ng-repeat="f in files" style="font:smaller">{{f.name}} {{f.$error}} {{f.$errorParam}}</li>
    </ul>
</div>

在我的 Controller 中，我有:

$scope.$watch('files', function () {
    $scope.upload($scope.files);
});
$scope.$watch('file', function () {
    if ($scope.file != null) {
        $scope.files = [$scope.file];
    }
});
$scope.log = '';


$scope.upload = function (files) {
    if (files && files.length) {
        for (var i = 0; i < files.length; i++) {
          var file = files[i];

          if (!file.$error) {

            Upload.upload({
                url: (serviceBase + 'api/ppt/docs/upload/multi?transId=' + [$scope.transId]),
                data: {
                  username: $scope.username,
                  file: file,
                  filename: file.name
                }
            }).progress(function (evt) {
                var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
                $scope.log = 'progress: ' + progressPercentage + '% ' +
                            evt.config.data.file.name + '\n' + $scope.log;
            }).success(function (data, status, headers, config) {
                $timeout(function() {
                    $scope.log = 'file: ' + config.data.file.name + ', Response: ' + JSON.stringify(data) + '\n' + $scope.log;
                });
            }).error(function(data, status, headers, config) {

                var errors = [];
                $scope.errors = data;

                for (var i=0; i<$scope.errors.length; i++)
                {
                    errors.push($scope.errors[i].errMsg);
                }

                $scope.message = "Error uploading files due to: " + errors.join(' ');
            });
          }
        }
    }
};

我在文档中看到了一些示例，但没有看到最佳的实现方式，尤其是当我想要对每个上传的文件进行单独删除/移除而不是全部时。

非常感谢。

Answer 1

我想这里可以使用直接的方法。

1. 将 deleteFile 处理程序添加到您的作用域中，获取要删除的文件的数组索引。
2. 为每个文件添加一个链接/按钮/句柄以在单击时删除它并设置它的属性 ng-click="deleteFile($index)。$index 是由 ng-repeat 创建。
3. 在您的 deleteFile 处理程序中调用后端来删除文件，并在成功后拼接 files 数组以删除已删除的条目。

HTML:

<li ng-repeat="f in files">
     {{f.name}} {{f.$error}} {{f.$errorParam}} <a class="deleteHandle" ng-click="deleteFile($index)">&times;</a>
</li>

JS:

$scope.deleteFile = function(idx) {
     var file = $scope.files[idx];
     if (file.isUploaded) {
          $http.delete('/api/files/'+file.id).then(function(response){
               if (response.status == 200) {
                    $scope.files.splice(idx, 1);
               }
         });
      } else {
           $scope.files.splice(idx, 1);
      }
}