Multipart Form Image Załaduj obraz i Json

Question

Trochę utknął na tym, trzeba przesłać obraz i json razem za pomocą wieloczęściowy formularz .. nie wiem, jak wysłać nagłówki typu treści lub przesłać obraz .. Myślę, że muszę przekonwertować na blob .. w tej chwili jestem tylko wysyłaniem danych, które dostaję z pola wejściowego pliku.

wszelkie sugestie byłoby wielkie dzięki

 $http({ 
     method: 'POST', 
     url: URL, 
     headers: { 'Content-Type': false }, 

     transformRequest: function (data) { 

      console.log(data); 

      var formData = new FormData(); 
      formData.append("formatteddata", angular.toJson(data.model)); 


      formData.append('media', Image) 

      return formData; 
     }, 

     data: { model: shoutoutData, image: shoutoutImage} 
    }). 
    success(function (data, status, headers, config) { 

     alert("success!"); 

    }). 
    error(function (data, status, headers, config) { 

     alert("failed!"); 

    }); 

Answer 1

Here is the code what i did in my project to upload image and data:- 
HTML PAGE :- 
<form role="form" name="myForm" ng-submit="submitCuisine(myForm.$valid)" novalidate> 
      <div class="form-group" ng-class="{ 'has-error' : myForm.name.$invalid && myForm.name.$touched }"> 
       <label for="name">Name</label> 
       <input type="text" class="form-control" id="name" name="name" 
        placeholder="Name of cuisine" ng-model="dataform.name" required> 
      </div> 
      <div class="form-group" ng-class="{ 'has-error' : myForm.description.$invalid && myForm.description.$touched }"> 
       <label for="description">Description</label> 
       <input type="text" class="form-control" id="description" name="description" 
        placeholder="Description for cuisine" ng-model="dataform.description" required> 
      </div> 
      <div class="form-group" ng-class="{ 'has-error' : myForm.category.$invalid && myForm.category.$touched }"> 
       <label for="description">Category</label> 
       <select class="form-control" ng-model="dataform.category" id="category" name="category" required> 
        <option>Veg</option> 
        <option>Non-veg</option> 
       </select> 
      </div> 
      <div class="form-group" ng-class="{ 'has-error' : myForm.subcategory.$invalid && myForm.subcategory.$touched }"> 
       <label for="description">Sub-Category</label> 
       <select class="form-control" ng-model="dataform.subcategory" id="subcategory" name="subcategory" required> 
        <option>Main Course</option> 
        <option>Staters</option> 
       </select> 
      </div> 
      <div class="form-group" ng-class="{ 'has-error' : myForm.price.$invalid && myForm.price.$touched }"> 
       <label for="description">Price</label> 
       <span class="fa fa-dollar"></span> 
       <input type="number" class="form-control" id="price" name="price" 
        placeholder="Price" ng-model="dataform.price" required> 
      </div> 
      <div class="form-group"> 
       <label for="description">Image</label> 
       <input type="file" file-input="files" name="file"/> 
      </div> 
      <button class="btn btn-primary" type="submit" ng-disabled="myForm.$invalid"> Submit</button> 
     </form> 



Controller:- 
$scope.submitCuisine=function(isvalid){ 
    if(isvalid){ 
     var fd=new FormData(); 
     angular.forEach($scope.files,function(file){ 
      fd.append('file',file); 
     }); 

     fd.append('formdata',JSON.stringify($scope.dataform)); 

     $http.post('admin/managecuisineAdd',fd,{ 
      transformRequest:angular.identity, 
      headers:{'Content-type':undefined} 
     }).success(function(data){ 
      $scope.status=data; 
      $scope.itemlist.push(data) 
      $scope.message="New Dish Added Successfully" 
     }); 
    } 
} 

Directive :- 
myApp.directive("fileInput",['$parse',function($parse){ 
    return{ 
     restrict:'A', 
     link:function(scope,ele,attrs){ 
      ele.bind('change',function(){ 
       $parse(attrs.fileInput). 
       assign(scope,ele[0].files) 
       scope.$apply() 
      }); 
     } 
    } 
}]); 

Plunker: - http://plnkr.co/edit/yPNA0ij3Dn37tsI9w7Z2?p=preview sprawdzić nagłówek postu w Firebug okaże się, że to pokazuje obraz w postaci zaszyfrowanej i danych na koniec.

Answer 2

Zastosowanie formData jak conteiner jak Say @squiroid

W kodzie html

<form ng-submit="vm.uploadFile()"> 
     <input type="file" id="filePhoto" name="file"> 
     <button type="submit">Save</button> 
</form> 
{{vm.previewImage()}} 

W moim kontroler

vm.previewImage = previewImage; 
function previewImage(){ 
     console.info("vm.file "+vm.file); 
     var imageLoader = document.getElementById('filePhoto'); 
     console.info(imageLoader); 
     imageLoader.addEventListener('change', handleImages, false); 

     function handleImages(e) { 
      console.info("entra handleImage"); 
      vm.file = e.target.files[0]; 
      console.info("archivo "); 
      console.info(vm.file); 
     } 
} 

vm.uploadFile = uploadFile; 
function uploadFile() { 
    return dataFactory.uploadFile(
     vm.file) 
     .then(function successCallback(response) { 
      console.info('uploadFile success'); 
      console.info(response); 
     }, function errorCallback(response) { 
      console.info('updauploadFileteUser fail'); 
      console.info(response); 
     }); 
} 

W DataFactory

function updateUser(token,file,username,email,lenguaje,colapsarMenu){ 
    var formData=new FormData(); 
    formData.append('file',file); 
    //append more params if you want 

    return $http 
     .post('/uploadFile', 
     formData,{ 
      transformRequest:angular.identity, 
      headers: { 
       //Optional token bearer 'Authorization': 'Bearer '+token, 
       'Content-type':undefined 
      } 
     }); 
}