Laravel 中的图片上传 - PHP

在使用 Laravel 开发 Web 应用程序时，可能经常需要上传图片。Laravel 提供了多种上传图片的方式，本文将介绍其中的两种方式：基于表单的上传以及基于 AJAX 的上传。

基于表单的上传

表单

首先，在视图中创建一个包含上传图片表单的页面。可以使用 Form 类的 open 方法打开一个表单，然后在表单中添加一个 file 类型的输入元素。

{!! Form::open(['url' => 'foo/bar', 'files' => true]) !!}

    {!! Form::file('image') !!}

{!! Form::close() !!}

控制器

然后，在控制器中处理上传图片的逻辑。可以使用 Request 对象的 file 方法获取上传的图片，然后使用 store 方法将图片存储到服务器上。

public function upload(Request $request)
{
    $image = $request->file('image');
    $path = $image->store('public/images');

    return view('upload', ['path' => $path]);
}

其中，store 方法会返回存储图片的路径。这里将图片存储在 public/images 目录下。

视图

最后，在视图中显示上传的图片。可以使用 asset 函数获取图片的 URL，然后在 img 元素中使用这个 URL。

<img src="{{ asset($path) }}" alt="Uploaded image">

基于 AJAX 的上传

表单

首先，在视图中创建一个包含上传图片表单的页面。与基于表单的上传不同的是，这次我们会添加一个隐藏的 iframe 元素，用于实现无刷新上传。

{!! Form::open(['url' => 'foo/bar', 'id' => 'image-form', 'files' => true]) !!}

    {!! Form::file('image') !!}
    {!! Form::button('Upload', ['id' => 'image-upload']) !!}

    <iframe id="image-iframe" name="image-iframe" style="display: none;"></iframe>

{!! Form::close() !!}

注意，表单的 id 属性需要设置为 image-form，Upload 按钮的 id 属性需要设置为 image-upload。

控制器

然后，在控制器中处理上传图片的逻辑。与基于表单的上传不同的是，这次我们需要使用 response 方法返回一个 JSON 对象，以便在 AJAX 请求中获取上传结果。

public function upload(Request $request)
{
    $image = $request->file('image');
    $path = $image->store('public/images');

    return response()->json(['path' => $path]);
}

JS 脚本

最后，编写 JavaScript 代码，实现基于 AJAX 的上传。可以使用 jQuery 库发送 POST 请求，在上传成功后更新图片的 URL。

$(function() {
    $('#image-upload').click(function() {
        $('#image-form').attr('target', 'image-iframe');
        $('#image-form').submit();
    });
});

$(function() {
    $('#image-iframe').on('load', function() {
        var response = $.parseJSON($('#image-iframe').contents().text());
        var path = response.path;
        var url = '{{ asset(':path') }}';
        url = url.replace(':path', path);
        $('#uploaded-image').attr('src', url);
    });
});

其中，#image-upload 是上传按钮的 ID，#image-iframe 是隐藏的 iframe 的 ID，#uploaded-image 是用于显示上传成功后的图片的 img 元素的 ID。

总结

本文介绍了 Laravel 中的两种图片上传方式：基于表单的上传和基于 AJAX 的上传。基于表单的上传适用于上传单个或少量图片，基于 AJAX 的上传适用于上传多个图片或需要实时显示上传进度的场景。开发者可以根据需求选择合适的方式。