2015-05-27 2 views
1

Этот вопрос слишком сложный?

У меня есть код моей клиентской стороны с переменными данных post и интересно, как я могу добавить данные файла в $http.post.

Я видел несколько примеров, и они либо используют настраиваемую директиву, либо ручную форму представления, ни то, что я ищу.

стороне клиента:

<input type="file" id="photo"> 
//file can be accessed using 
var photo = document.getElementById("photo").files[0]; 
$scope.data.photo = photo 

ИЛИ

var formData = new FormData(); 
formData.append("photo", photo); 
formData.append("title", $scope.data.title); 
this.delegate.insert(formData); 

Отправляется для обслуживания

$http.post("/admin/speakers/?" + data, token.body) //token.body = $scope.data 
    .success(function(data, status, headers, config) { 
    }) 
    .error(function(data, status, headers, config) { 
    }); 

Ожидая со стороны выходного сервера (производится с использованием POSTMAN - клиент REST) ​​

console.log(request.files, request.body); 

{ photo: 
    { fieldname: 'photo', 
    originalname: '01.jpg', 
    name: 'fbb54fa6d588ac253ca7dab08a904356.jpg', 
    encoding: '7bit', 
    mimetype: 'image/jpeg', 
    path: '/var/folders/jg/hkmz0fdn64g8w1jgf60j2lcw0000gn/T/fbb54fa6d588ac253ca7dab08a904356.jpg', 
    extension: 'jpg', 
    size: 12279, 
    truncated: false, 
    buffer: null } } 

{ name: 'SA', 
    title: 'Dev', 
    company: 'CA', 
    bio: 'some bio', 
    twitter: '@twitter', 
    sessionId: '1' } 
+1

Если вы можете продлить ваше приложение с угловыми модулями, проверьте эти: https://github.com/danialfarid/ng-file-upload и http://ngmodules.org/modules/angular-file-upload, оба доступны как пакеты NPM. –

ответ

0

Попробуйте поставить Content-Type header к undefined и transformRequest к angular.identity (не сериализовать объект FormData):

$http.post("/admin/speakers/?" + data, token.body, { 
    transformRequest: angular.identity, 
    headers: { 
     'Content-Type': undefined 
    } 
}).success(function(data, status, headers, config) { 

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

}); 

функция transformRequest по умолчанию ANGULAR будет пытаться сериализовать наш объект FormData, поэтому мы переопределите его с помощью функции идентификации, чтобы оставить данные неповрежденными. По умолчанию заголовок Content-Type по умолчанию для запросов POST и PUT является application/json, поэтому мы хотим изменить это. Установив «Content-Type»: undefined, браузер устанавливает для Content-Type multipart/form-data для нас и заполняет правильную границу. Ручная настройка «Content-Type»: multipart/form-data не сможет заполнить граничный параметр запроса.

(https://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs)

Смежные вопросы