带有 Laravel 5.3 的 Slim 图像裁剪器

Question

I have recently been picking up Laravel and getting grips with it, I have made a simple site which allows me to make and edit articles - What I am trying to achieve now is to add an image uploader to it.

I have purchased this image cropper which is responsive and is great for mobiles and desktops but when it comes to adding it to my Laravel project I am a bit stuck.

In the download there are a few files many being .js files and some PHP files, I read that I need to add the Slim.php file in App/ directory which I have done and I have also added the js files including making the uploader appear in the view.

Where I am stuck is when click I to add the file and click upload, It throws an error and inspecting the network its trying to send the data to articles/async.php which I've not yet added - my question is where does this go in the project as its basically just a script? The information I have found doesn't tell me where I need to put this.

My thoughts are I just take the script and add it to my store function and find where its looking for the script and redirect it to the store but my thoughts are that this wouldn't work as it handles the image and then once its uploaded I send the information for the store.

If anyone is able to help that would be great like I said im a bit of a novice when it comes to Laravel so any help would be great.

Answer 1

I used Slim with a Laravel 5.4 application. In my example I am not using ajax to submit the image, it's a standard form post. Here is what I did to get it to work:

• Copy slim.php to App/Classes (I chose to put it in a new directory called Classes, but you can put it wherever)
• In Slim.php you must namespace it like so: namespace App\\Classes;
• In your controller, pull in the Slim class like so: use App\\Classes\\Slim;

For this next part, I will preface by saying I set up my Slim cropper to only handle one image. Thus, I changed the name of my input to 'avatar'. Here is the HTML I'm using:

<div class="slim" data-label="Drop profile photo here" data-size="200, 200" data-ratio="1:1">
    @if ( $user->avatar )
    <img src="{{ $user->avatar }}" />
    @endif
    <input type="file" name="avatar" />
</div>

Here is my controller:

public function avatar($id, Request $request)
{
    $user = User::findOrFail($id);

    if ( $request->avatar )
    {
        // Pass Slim's getImages the name of your file input, and since we only care about one image, use Laravel's head() helper to get the first element
        $image = head(Slim::getImages('avatar'));

        // Grab the ouput data (data modified after Slim has done its thing)
        if ( isset($image['output']['data']) )
        {
            // Original file name
            $name = $image['output']['name'];

            // Base64 of the image
            $data = $image['output']['data'];

            // Server path
            $path = base_path() . '/public/img/avatars/';

            // Save the file to the server
            $file = Slim::saveFile($data, $name, $path);

            // Get the absolute web path to the image
            $imagePath = asset('img/avatars/' . $file['name']);

            $user->avatar = $imagePath;
            $user->save();
        }
    }

    return redirect()->back()->with('success', "User's profile picture has been updated!");
}

I hope this helps

Answer 2

A better way than the Slim class allowing to choose between a local upload or on a remote server like Amazon S3.

public function upload(Request $request)
    {
        if ($request->hasFile('slim_output_0'))
        {
            $image = $request->file('slim_output_0');

            if ($image->isValid())
            {
                $extension = $image->getClientOriginalExtension();
                $origFileName = Str::slug($image->getClientOriginalName());
                $fileName = Str::slug(Str::replaceFirst($extension, '', $origFileName)).'.jpg';
                $path = '....';

                /**
                 * PROCESS UPLOAD WITH LARAVEL
                 * Permit local upload or Amazon S3 Upload
                 */

                return response()->json([
                    'status' => 'success',
                    'name' => $fileName,
                    'path' => $path.$fileName
                ]);
            }
        }

        return response()->json([
            'status' => 'failure',
            'message' => 'Picture not found'
        ]);
    }