Комбинация загрузки изображения ajax с помощью формы submit ajax

У меня есть загрузка изображения ajax вроде этого

$scope.uploadFile = function(){
    var file = $scope.myFile;
    console.log(file);
    var uploadUrl = "/api/upload_image";//It will also goes to '/api/get_data'
    //fileUpload.uploadFileToUrl(file, uploadUrl);
    var fd = new FormData();
    fd.append('file', file);
    $http.post(uploadUrl, fd, {
        transformRequest: angular.identity,
        headers: {'Content-Type': undefined}
    })
    .success(function(e){
        console.log("Success");
    })
    .error(function(e){
        console.log("Error");
    });
};

И вызов формы отправки ajax вот так.

$http({
    url: "/api/get_data",
    method: "POST",
    dataType:"json",
    data:JSON.stringify(this.formData)
}).success(function(data) {
    console.log("Success");      
}).error(function(error) {
    console.log("Error");
});

Оба работают, но отдельно. Как объединить эти два ajax в один, который представляет ajax, второй.

Или есть способ опубликовать данные изображения во втором ajax, я использую angular + laravel5.2

Мой входной файл в представлении angular

<input type="file" file-model="myFile">

Спасибо.

Ответ 1

Вы можете объединить эти два ajax, как это, отправить изображение и formData, попробовать с этим.

var file = $scope.myFile;
var fd = new FormData();
fd.append('file', file);
fd.append('formData', JSON.stringify(this.formData));


$http({
    url: "/api/get_data",
    method: "POST",
    dataType:"json",
    transformRequest: angular.identity,
    headers: {'Content-Type': undefined},
    data:fd
}).success(function(data) {

Для извлечения formData вам необходимо декодировать json на скриптах на стороне сервера.