Senden von mehrteiligen Formular- und JSON-Daten von Angular JS an MVC

Question

Ich habe ein Upload-Datei-Steuerelement, das die Dateidaten auf einen MVC-Controller hochlädt. Ich möchte auch zusätzliche Upload Details Modellobjekt in der gleichen Anfrage senden.

Aber für Datei - Upload der Anfrage Inhaltstyp undefined funktioniert für mich. Damit der MVC-Controller die Modelldaten effektiv empfangen kann, muss er application/json lauten. Wie würde ich das in einer einzigen Anfrage tun?

Oder gibt es einen anderen Ansatz, dem ich folgen kann? Bitte vorschlagen. Damit der Upload abgeschlossen werden kann, müssen beide Daten an den Server gesendet werden.

ich tue, ist

var formdata; 
$scope.getTheFiles = function ($files) { 
    formdata = new FormData(); 
    angular.forEach($files, function (value, key) { 
     formdata.append(key, value); 
    }); 

und

$scope.validateFiles = function() { 

    var params = UploadDataServices.getGroupMembershipUploadParams(); 

    $scope.pleaseWait = { "display": "block" }; 

    var request = { 
     method: 'POST', 
     url: BasePath + 'uploadNative/ValidateFiles/', 
     data: formdata, 
     headers: { 
      'Content-Type': undefined 
     } 
    }; 

    // SEND THE FILES. 
    console.log(formdata); 

    if (formdata != null || formdata != undefined) { 
     $http(request) 

Und in der MVC-Controller ich die Datei-Daten erhalten, wie

System.Web.HttpFileCollection hfc = System.Web.HttpContext.Current.Request.Files; 

Jetzt ich, dass params senden möchten auch in der Anfrage, die ich über

bekommen habe

var params = UploadDataServices.getGroupMembershipUploadParams(); 

Wie würde ich das tun? Ich versuchte es zu tun

var request = { 
     method: 'POST', 
     url: BasePath + 'uploadNative/ValidateFiles/', 
     data: {formdata:formdata,arg:params}, 
     headers: { 
      'Content-Type': undefined 
     } 
    }; 

Aber ich konnte nicht auf die Datei zugreifen.

Bitte schlagen Sie einen Weg vor.

Vielen Dank im Voraus.

Answer 1

Auf diese Weise können Sie mehrere Dateien mit einigen Eigenschaften hochladen.

Um mehrere Dateien/Datensätze mit formdata zu senden, müssen Sie die Indizierung für den Schlüssel z. [0].someKey, d. H. formdata.append('[' + i + '].' + key, value);, aber wenn Sie nur einen Datensatz senden möchten, können Sie die Indizierung entfernen und den Schlüssel direkt in die Append-Funktion übergeben.

Wenn der Benutzer auf die Schaltfläche "Datei hinzufügen" klickt, wird der Tabelle eine neue Zeile hinzugefügt. Der Benutzer kann eine Datei auswählen, indem er auf das Dateisteuerelement klickt, und die Anweisung setzt das File-Objekt auf den Bereich des Controllers. Wenn Sie auf die Schaltfläche "Speichern" klicken, durchforste ich alle Dateien und ihre Eigenschaften und hänge sie an das FormData-Objekt an und poste es mit einem Konfigurationsobjekt zusammen mit dem FormData-Objekt auf dem Controller.

Das Modell.

public class FileModel 
{ 
    public int Id { get; set; } 

    public string Name { get; set; } 

    public HttpPostedFileBase Attachment { get; set; } // The HttpPostedFileBase provides access to files uploaded by the client. 
} 

Der Aktionsmethode auf Controller-MVC

[HttpPost] 
public JsonResult SaveFiles(List<FileModel> files) 
{ 
    // Your logic here. 
} 

The View.

<form role="form" ng-submit="saveFiles()"> 
    <div class="form-group"> 
     <table class="table table-bordered table-striped table-responsive"> 
      <thead> 
       <tr> 
        <th>Name</th> 
        <th>File</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr ng-hide="files.length"> 
        <td colspan="2">No records to display.</td> 
       </tr> 

       <tr ng-repeat="file in files"> 
        <td> 
         <input type="text" class="form-control" ng-model="file.Name" /> 
        </td> 
        <td> 
         <input type="file" class="form-control" file-model="file.Attachment" /> 
        </td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 

    <div class="col-xs-12"> 
     <div class="col-xs-6"> 
      <button type="button" class="btn btn-info btn-sm" ng-click="addFile()">Add File</button> 
     </div> 
     <div class="col-xs-6"> 
      <button type="submit" class="btn btn-info btn-sm">Save</button> 
      <button type="button" class="btn btn-info btn-sm" ng-click="cancelSaveFiles()">Cancel</button> 
     </div> 
    </div> 
</form> 

Der AngularJS-Controller.

var app = angular.module('example', []); 

app.controller('FilesController', function ($scope) { 
    $scope.files = []; 
    $scope.saveFiles = saveFiles; // saveFiles func given below. 
}); 

Die AngularJS Richtlinie für <input type="file" />.

app.directive('fileModel', function ($parse) { 
     return { 
      restrict: 'A', 
      link: function (scope, element, attrs) { 
       var model = $parse(attrs.fileModel); 
       var modelSetter = model.assign; 

       element.bind('change', function() { 
        scope.$apply(function() { 
         modelSetter(scope, element[0].files[0]); // sets the file object on the model property. 
        }); 
       }); 

       scope.$watch(model, function (newValue, oldValue) { 
       if (newValue === null || newValue === undefined || newValue === '') { 
        angular.element(element).val(''); // clears the file from the input element if the model is cleared. 
       } 
      }); 
     } 
    }; 
});   

Der AJAX Anruf.

function saveFiles() { 
      if (angular.isArray($scope.files) && $scope.files.length > 0) { 
       var formdata = new FormData(); 

       for (var i = 0; i < $scope.files.length; i++) { 
        for (var key in $scope.files[i]) { 
         var value = $scope.files[i][key];  
         formdata.append('[' + i + '].' + key, value); 
        } 
       } 

       var config = { 
        transformRequest: angular.identity, 
        headers: { 'Content-Type': undefined }       
       }; 

       $http.post('/Area/Controller/SaveFiles', formdata, config) 
        .success(saveFilesCompleted); 

       function saveFilesCompleted(data) { 
        // call back 
       } 
      } 
     }