Laravel实现文件(图片)上传

这里以文章的封面图片上传为例

• 打开config/filesystems.php文件，定义上传文章图片封面本地路径 uploads/article

    'disks' => [

        'local' => [
            'driver' => 'local',
            'root' => storage_path('app'),
        ],
        // 文章上传封面
        'article' => [
            'driver' => 'local',
            // 上传图片的路径
            'root' => public_path('uploads/article'),
        ],
        'public' => [
            'driver' => 'local',
            'root' => storage_path('app/public'),
            'url' => env('APP_URL').'/storage',
            'visibility' => 'public',
        ],

        's3' => [
            'driver' => 's3',
            'key' => env('AWS_ACCESS_KEY_ID'),
            'secret' => env('AWS_SECRET_ACCESS_KEY'),
            'region' => env('AWS_DEFAULT_REGION'),
            'bucket' => env('AWS_BUCKET'),
            'url' => env('AWS_URL'),
            'endpoint' => env('AWS_ENDPOINT'),
        ],

    ],

• 设置默认图片，在config文件夹下新建up.php文件，并在 public/uploads/article/目录下放一张名为1.jpg的图片作为默认图片。

<?php
return [
    // 默认图片
    'pic' => '/uploads/article/1.jpg'
];

• 使用WebUploader插件进行上传的，Webuploader文档，使用WebUploader需要导入以下文件，可在官网直接下载

<!--引入CSS-->
<link rel="stylesheet" type="text/css" href="webuploader文件夹/webuploader.css">

<!--引入JS-->
<script type="text/javascript" src="webuploader文件夹/webuploader.js"></script>

• 前端表单

        <form enctype="multipart/form-data" action="{{ route('admin.article.store') }}" method="post" class="form form-horizontal">
            @csrf

            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">* </span>文章标题：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" name="title">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">* </span>文章描述：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" name="desn">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">* </span>文章封面：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="hidden" name="pic" id="pic" value="{{ config('up.pic') }}">

                    {{--                    <input type="file" class="input-text" name="pic">--}}
                    <div id="picker" >选择文件</div>
                </div>
                <div class="formControls col-xs-4 col-sm-4">
                    <img src="" id="img" style="width: 100px;">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">* </span>文章内容：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <textarea name="body" id="body" cols="30" rows="10"></textarea>
                </div>
            </div>
            <div class="row cl">
                <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                    <input class="btn btn-primary radius" type="submit" value="添加文章">
                </div>
            </div>
        </form>

   <script>
        // 初始化Web Uploader
        var uploader = WebUploader.create({
            // 选完文件后，是否自动上传。
            auto: true,
            // swf文件路径
            swf:  '/webuploader/js/Uploader.swf',
            // 文件接收服务端。
            server: '{{route('admin.article.upfile')}}',
            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: {
                id:'#picker',
                //是否开起同时选择多个文件能力。
                multiple:true
            },
            formData:{
              _token: '{{csrf_token()}}'
            },
            fileVal:'pic',
            // 只允许选择图片文件。
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            }
        });

        // 上传成功时的回调方法
        uploader.on('uploadSuccess', function (file, ret) {
            // 图片路径
            let src = ret.url;
            // 给表单添加value值
            $('#pic').val(src);
            // 给图片添加src
            $('#img').attr('src',src);
        });
    </script>

• 控制器实现文件上传

	// 图片上传
	public function upfile(Request $request)
    {
        // 读取config文件夹下up.php的内容
        $pic = config('up.pic');
        if ($request->hasFile('pic')) {
            // 参数1 上传
            // 参数2 配置的节点名称
            // filesystems.php文件配置article节点
            $ret = $request->file('pic')->store('', 'article');
            $pic = '/uploads/article/' . $ret;
        }
        return ['url' => $pic, 'status' => 0];
    }

	// 存储到数据库
    public function store(AddArtRequest $request) {
        $post = $request->except('_token','file');
        // 添加到数据库
        Article::create($post);
        return redirect(route('admin.article.index'));
    }

效果如下：