使用相同的上传器angular上传多个文件

upload multiple files using the same uploader angular

本文关键字:angular 文件      更新时间:2023-09-26

所以我正在努力让这个上传器工作,这就是我目前拥有的

这是我的html

<div class="row" ng-repeat="row in fileUploadRows">
                    <div ng-if="advanced_user" class="btn btn-info btn-sm" style="display:inline-block" ngf-select="uploadinv($file, $index)">Upload Attachment</div>
                    <p style="display:inline-block;" ng-if="row.fileName">Uploaded file: {{row.fileName}}
                        <button type="button" ng-click="deleteInvAttachment(event.filenameinv)" class="btn btn-danger btn-sm">
                            <i class="fa fa-trash-o"></i>
                        </button>
                        <button type="button" ng-click="addInvAttachment($index)" class="btn btn-info btn-sm">
                            <i class="fa fa-plus"></i>
                        </button>
                        <button type="button" ng-click="removeInvAttachment(row)" class="btn btn-danger btn-sm">
                            remove last attachment
                        </button>
                    </div>

这是在我的控制器中

$scope.fileUploadRows = [];
var fileDetails = {
  fileName: $scope.event.filenameinv
}
$scope.fileUploadRows.push(fileDetails);
$scope.counter = 1;
$scope.addInvAttachment = function(index) {
  var fileDetails = {
    fileName: ''
  }
  $scope.fileUploadRows.push(fileDetails);
  $scope.counter++;
}
$scope.removeInvAttachment = function(row) {
  $scope.fileUploadRows.splice(row, 1);
}

现在我现在的功能在一定程度上有效,我可以点击加号按钮,它会在html端加载一个空白的上传按钮,以及{{fileUploadRows}}中的一个空白fileName。现在我的问题是当我尝试上传一个新文件时。它替换旧文件(以及旧字符串等)

这是我的上传

$scope.uploadinv = function (file, index) {
        if (file && $scope.advanced_user) {
            Upload.upload({
                url: '',
                data: {file: file}
            }).then(function (resp) {
                sweetAlert({title: "Attachment Saved", type: "success"});
            }, function (resp) {
                sweetAlert({title: "Attachment Not Saved", type: "error"});
            }, function (evt) {
                var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
                console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
                $scope.event.filenameinv = evt.config.data.file.name
            });
        }
    };

那么,如何将每个文件保存到数组中呢?

感谢

I强烈建议您使用ng文件上传:https://github.com/danialfarid/ng-file-upload

非常完整,支持拖放、调整图像大小等等。

看起来你可能正在使用它(我注意到上传服务和ngf-select指令)

如果是,请检查ngf更改,并尝试将文件输入与ng模型绑定,以获得$scope可访问性。