如何使用对 MVC 操作方法的 Angular-js http 调用上传包含多条记录的文件？

Question

在设计中，我有多个记录，一个文件以表格形式上传。

在文件的每个 ng-change 中，我获取文件并将其存储到如下所示的全局变量中。

app.controller('AngController', function ($http, $scope) {

$scope.EqFiles = '';

$scope.UploadFiles = function (files) {

        $scope.EqFiles = files;
};

在每个 'Add' 操作（加号按钮）上，我将所有值拉入一个数组，如下所示

$scope.SystemAccesories = [];
$scope.Add = function () {
        var systemdetail = {};
        systemdetail.SystemAcsId = 0;
        systemdetail.AcsName = $scope.txtAccessoryName;
                .
                .
                .
        systemdetail.Remarks = $scope.txtSysRemarks;
        if ($scope.EqFiles.length != 0) {

            systemdetail.ManualFile = $scope.EqFiles;
            systemdetail.IsManualFileAvailable = true;
        }
        else {
            systemdetail.IsManualFileAvailable = false;
        }

        $scope.SystemAccesories.push(systemdetail);
    };

最后我将它发送到 MVC 控制器的方法

$http({
        method: 'POST',
        url: '/Equipment/UpdateEquipment',
        data: { EquipmentAllFields: scope.SystemAccesories },
        headers: { 'content-type': 'application/json' }
      }).then(function (response) {
                
      });

使用以下参数。

public class SystemAccessories
    {
        public int SystemAcsId { get; set; }
        public string AcsName { get; set; }
                .
                .
                .
        public string Remarks { get; set; }
        public Nullable<bool> IsManualFileAvailable { get; set; }
        public HttpPostedFileBase ManualFile { get; set; }
    }

在 c# 端按预期获取所有文本值，但所有 'ManualFile' 参数均获取空值。那么如何捕捉它然后我可以存储准确的相关数据。

Answer 1

在文件的每次 ng-change 中，我获取文件并将其以 Base64 序列化的形式存储到如下所示的全局变量中。

    $scope.UploadSysFiles = function (event, sysAccId, rowIndex) {
            var file = event.target.files;
            if (file[0].size < 5000000) {
                var reader = new FileReader();
                reader.readAsDataURL(file[0]);
                reader.onload = () => {
                    $scope.SysFileByteCode = reader.result;
                };
                cntSysMan = file.length;
                $scope.SysFiles = file[0];
                setTimeout(function () {
                    if (sysAccId === 0 && rowIndex !== -1) {
                        if (cntSysMan != 0) {
                            $scope.editedEquipmentList.SystemAccesories[rowIndex].ManualFile = $scope.SysFileByteCode;
                        }
                    }
                    else if (sysAccId !== 0 && rowIndex !== -1) {
                        if (cntSysMan != 0) {
                            if ($window.confirm("Do you really like to replace the file '" + $scope.editedEquipmentList.SystemAccesories[rowIndex].FileName + "' by '" + $scope.SysFiles.name + "' ?")) {
$scope.editedEquipmentList.SystemAccesories[rowIndex].ManualFile = $scope.SysFileByteCode;
                            }
                        }
                    }
                }, 3000);
            }
            else {
                alert('File size exceeded');
            }
        };

设置获取文件的超时时间，因为获取图像后将其转换为 base64 并触发加载事件。

最后我将它发送到 MVC 控制器的方法

$http({
        method: 'POST',
        url: '/Equipment/UpdateEquipment',
        data: { EquipmentAllFields: scope.SystemAccesories },
        headers: { 'content-type': 'application/json' }
      }).then(function (response) {
                
      });

MVC 控制器

[HttpPost]
        public ActionResult UpdateEquipment(EquipmentAllFields objEquipmentAllFields)
        {.
         .
         .
         foreach (var systemAcs in objEquipmentAllFields.objSystemAcs)
         {
          string removedAcsUnwantedString = systemAcs.ManualFile.Substring(systemAcs.ManualFile.LastIndexOf(',') + 1);
          var base64AcsEncodedBytes = Convert.FromBase64String(removedAcsUnwantedString);
          System.IO.File.WriteAllBytes(severFilePath + newFile, base64AcsEncodedBytes);
         }
         . 
         .
        }

如何使用对 MVC 操作方法的 Angular-js http 调用上传包含多条记录的文件？

How do I upload files with several records using an Angular-js http call to an MVC action method?

asp.net-mvc

angularjs