각도가있는 양식의 일부로 이미지 업로드

AngularJS가있는 여러 텍스트 필드가있는 양식의 일부로 이미지를 업로드 할 때 지침이 필요합니다. 이미 웹 및 스택 오버 플로우에 관한 여러 게시물과 기사를 보았으며 대부분 이미지를 독자적으로 업로드하거나 Json 데이터를 포함하지 않았습니다. 나도 같은 형태로 여러 필드를 사용자가 난에 파일을 업로드해야각도가있는 양식의 일부로 이미지 업로드

"항목을 추가"클릭으로 새 항목을 만들 싶습니다

: 그래서 여기 내 특정 상황 로컬 디렉토리 "/ images"를 만들고 URL 경로 + 파일 이름을 양식에 작성된 나머지 데이터와 함께 API로 보냅니다.

예 :

드롭 파일 entry6.jpg에서/images 디렉토리 내 코드는 API로 전송 다음 개체 생성

{ 
"title": "Big sale", 
"link": "http://www.example.com", 
"image": images/entry6.jpg 
"id": 1 
}

당신이 수를 도와주세요?

현재 HTML 코드 :

<div ng-controller="EditClients" class="container"> 
<form> 
    <div class="form-group"> 
    <label>Title</label> 
    <input type="text" ng-model="newClientsItem.title" required="required" class="form-control"/><br/> 
    <label>Link</label> 
    <input type="url" ng-model="newClientsItem.link" required="required" class="form-control"/><br/> 
    <label>Image</label><br/> 
    <input type="file" ng-model="newClientsItem.image"/> 
    <a ng-click="createClientsItem(newClientsItem)" class="btn btn-default btn-lg">Add</a> 
    </div> 
</form>

그리고 JS :

var app = angular.module('app', ['ui.router', 'ngResource', 'ngTagsInput']); 

//constants for APIs 
app.constant("clientsUrl", "http://www.example.com:3001/api/clients/"); 

app.controller('EditClients', function($scope, $http, $resource, clientsUrl) { 

    $scope.clientsItemsResource = $resource(clientsUrl + ":id", {id: "@id"}, 
      { create : { method: "POST"}, save: { method: "PUT"}} 
     ); 

    $scope.listClientsItems = function() { 
     $scope.clientsItems = $scope.clientsItemsResource.query(); 
    }; 

    $scope.deleteClientsItem = function(clientsItem) { 
     if (confirm('Are you sure you to delete this item?')) { 
      clientsItem.$delete().then(function() { 
       $scope.clientsItems.splice($scope.clientsItems.indexOf(clientsItem), 1); 
      }); 
     } 
    }; 

    $scope.createClientsItem = function (clientsItem) { 

     //creates the new item 
    new $scope.clientsItemsResource(clientsItem).$create().then(function (newClientsItem) { 
     $scope.clientsItems.push(newClientsItem); 
    }); 
}; 

    $scope.updateClientsItem = function(clientsItem) { 
     clientsItem.$save(); 
     toastr.success('Item sauvé'); 
    }; 

    $scope.listClientsItems(); 

});

출처

2014-12-15 Emmanuel Henri