如何使用angularjs上传图像 [英] How to upload image with angularjs

问题描述

我正在尝试使用angularjs上传图像.

I am trying to upload image with angularjs.

HTML:

<input type="file" id="picture" name="picture"/>
<button class="btn btn-primary" ng-click="AddNew()" type="submit">Save</button>

Controller.js

Controller.js

$scope.AddNew=function(){
    console.log(picture.files.item(0));
    $scope.myobject.picture=picture[0];

    $http({
        url: 'http://localhost/mypro/resource',
        method: "POST",
        data: {'resource' : $scope.myobject },
        headers: {'Content-Type': undefined },
        transformRequest: angular.identity
    })
    .then(function(response) {
        // success

    }, 
    function(response) { // optional
        // failed
    });
};

Laravel 5.2:

Laravel 5.2:

routes.php

routes.php

Route::resource('resource','ResourceController');

控制器:

public function store(Request $request){

    Log::info('request: '.print_r(Input::all(),true));
    Log::info('request: '.print_r($request,true));
    return array('success' => true);
}

这里只是获取空数组. 在控制台中，我得到500(内部服务器错误).

Just getting empty array here. And in console I am getting 500 (Internal Server Error).

请指导我我在做错什么.

Please guide me what I am doing wrong.

谢谢.

推荐答案

好，

我通过深入研究SO找到了解决方案.

I have found the solution by searching deep in SO.

这是解决方法:

var profile_pic=picture.files.item(0);
var jsonData=$scope.myobject;
$http({
    url: 'http://localhost/mypro/resource',
    method: "POST",
    headers: {'Content-Type': undefined },
    transformRequest: function (data) {
        var formData = new FormData();
        formData.append("model", angular.toJson($scope.myobject));
        formData.append("profile_pic", picture.files.item(0));

        return formData;
    },
    data: {'myobject' : jsonData,'profile_pic':profile_pic},

感谢SO:)

这篇关于如何使用angularjs上传图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！