从 AngularJS 上传文件到 Laravel答案

【问题标题】：File upload from AngularJS to Laravel从 AngularJS 上传文件到 Laravel
【发布时间】：2014-11-08 05:26:17
【问题描述】：

这两天我一直在努力解决这个问题。我似乎无法通过文件上传来获得一个简单的表单。您可以在下面看到我的 webapp 中此页面的控制器。

myExampleApp.controller('ProfileSettingsController', ['$scope', '$window', '$http', function ($scope, $window, $http) {

    $scope.master = {};

    $scope.update = function(formData) {
        $scope.master = angular.copy(formData);

        $http({
            method  : 'POST',
            url     : '/photos',
            data    : $.param($scope.formData)
        })
        .success(function(data) {

            console.log(data);

            var response = data.split("-");

            if (response[0] == 'Success') {

                $scope.successMessage = response[1];
                $scope.showSuccessAlert = true;

            } else {

                $scope.failMessage = response[1];
                $scope.showFailAlert = true;

            }

        });

    };

}]);

这是属于它的视图：

<h1>Change your photo here:</h1>

<div ng-controller="ProfileSettingsController">

    <div class="alert alert-success" ng-show="showSuccessAlert">{{ successMessage }}</div>
    <div class="alert alert-fail" ng-show="showFailAlert">{{ failMessage }}</div>

    <form>

        <label for="image">Image:</label>
        <input type="file" ng-model="formData.image" name="image"/>

        <div class="form-group">
            <button class="btn btn-primary" ng-click="update(formData)">Save</button>
        </div>

    </form>

</div>

在这条路线Route::resource('photos', 'PhotosController'); 上发帖到/photos，如下所示：

<?php

class PhotosController extends BaseController {

    public function store() {

        $input = Input::get('image');

        $fileName = $input->getClientOriginalName();

        $fileName = str_replace(" " , "_" , $fileName);

        $image = Image::make($input['image']->getRealPath());

        File::exists(public_path()) or File::makeDirectory(user_photos_path());

        $image->save(user_photos_path().$fileName);
        $width = $image->width();
        $height = $image->height();

        $measure = ($width > $height) ? $height : $width;

        $image->crop($measure, $measure);
        $image->save(user_photos_path().'large-'.$fileName);
        $image->resize(200, 200);
        $image->save(user_photos_path().'tn-'.$fileName);
        $image->blur(15);
        $image->save(user_photos_path().'blur-'.$fileName);

        Photos::firstOrCreate(array('userid' => Auth::id()));

        $lawly = Photos::where('userid', '=', Auth::id())->first();

        // change the attribute
        $lawly->fileName = 'large-'.$fileName;
        $lawly->thumbnailName = 'tn-'.$fileName;
        $lawly->title = Auth::user()->username;

        // save to our database
        $lawly->save();

        echo "Success-Your profile picture has been changed.";

    }

    public function create() {

        echo "wrong route";

    }

}

但它总是抛出500 error。但是，如果我从 PHP 控制器中删除 $fileName = $input->getClientOriginalName();，它不会，所以这一定是错误所在。

【问题讨论】：

您的 formData 对象不会包含文件，只是一个名称值。阅读使用 ajax 上传文件
注意到您在每次保存时都会创建原始图像文件的 3 个衍生文件。处理同样问题的另一种方法是创建一个 URL 路径结构，允许您按需请求已处理的图像。这样做的好处是第一次保存图像的用户不必等待保存 4 个文件。相反，第一个请求特定图像衍生品的人只有在他们是第一个请求它的人时才需要额外等待。此处的说明：image.intervention.io/use/url

标签： javascript php jquery html angularjs

【解决方案1】：

如果您想上传一些内容，请在表单中添加“enctype = multipart/form-data”。

【讨论】：

【解决方案2】：

假设文件正在正确上传。尝试将此行更改为：

 $input = Input::file('image');

这一行：

 $image = Image::make($input);

【讨论】：

然后表单提交/上传有问题
看看@charlietfl 评论。你需要看看用ajax上传文件