带有 Laravel 5.3 的 Slim 图像裁剪器

Question

我最近一直在学习 Laravel 并掌握它，我制作了一个简单的网站，允许我制作和编辑文章 - 我现在想要实现的是向其中添加一个图像上传器。

我已经购买了这个图像裁剪器，它具有响应性，非常适合手机和台式机，但是当将它添加到我的 Laravel 项目时，我有点卡住了。

在下载中有一些文件，其中许多是.js文件和一些 PHP 文件，我读到我需要在App/目录中添加Slim.php文件，我已经完成了，我还添加了 js 文件，包括制作上传器出现在视图中。

我被卡住的地方是当点击我添加文件并点击上传时，它会抛出一个错误并检查网络它试图将数据发送到我尚未添加的articles/async.php - 我的问题是这在哪里进入项目，因为它基本上只是一个脚本？ 我找到的信息并没有告诉我需要把它放在哪里。

我的想法是我只是将脚本添加到我的商店功能中，然后找到它寻找脚本的位置并将其重定向到商店，但我的想法是这在处理图像时不起作用，然后一旦上传我发送商店的信息。

如果有人能够提供帮助，那就太好了，就像我说的，在 Laravel 方面我有点新手，所以任何帮助都会很棒。

Answer 1

我在 Laravel 5.4 应用程序中使用了 Slim。 在我的示例中，我没有使用 ajax 提交图像，它是一个标准的表单帖子。 这是我为使其正常工作所做的工作：

• 将slim.php复制到App/Classes（我选择放在一个叫Classes的新目录下，但你可以把它放在任何地方）
• 在 Slim.php 中，你必须像这样命名它： namespace App\\Classes;
• 在你的控制器中，像这样拉入 Slim 类： use App\\Classes\\Slim;

对于下一部分，我会先说我将 Slim 裁剪器设置为仅处理一张图像。 因此，我将输入的名称更改为“头像”。 这是我正在使用的 HTML：

<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>

这是我的控制器：

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!");
}

我希望这有帮助

Answer 2

比 Slim 类更好的方法，允许在本地上传或远程服务器（如 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'
        ]);
    }