1.下载删除插件‘html5-fileupload’（百度去收索下载）放入‘public’文件下。

11.png

2.总路由上面设置上传图片的路由：

//上传图片路由
Route::resource('photos', 'PhotoController', ['only' => ['store']]);

121.png

3.在端口打印路由，会显示错误提醒你需要建控制器，根据他的路径跑命令，建立上传图片的控制器。

212.png

4.在上传图片的模板上加以引用JS插件。

5.模板上的js代码直接上图展示及模板上的部分代码：

113.png

    <div class="am-g am-margin-top">
                    <div class="am-u-sm-4 am-u-md-2 am-text-right">
                        缩略图
                    </div>
                    <div class="am-u-sm-8 am-u-md-4 am-u-end col-end">
                        <div class="am-form-group am-form-file new_thumb">
                            <button type="button" class="am-btn am-btn-success am-btn-sm">
                                <i class="am-icon-cloud-upload" id="loading"></i> 上传新的缩略图
                            </button>
                            <input type="file" id="image_upload">
                            <input type="hidden" name="image">
                        </div>

                        <hr data-am-widget="divider" style="" class="am-divider am-divider-dashed"/>

                        <div>
                            <img src="" id="img_show" style="max-height: 200px;">
                        </div>
                    </div>
                </div>

6.控制器代码：

 /**
    * 上传图片
    */

    public function store(Request $request)
    {
        if ($request->hasFile('image') && $request->file('image')->isValid()) {
            $allow_types = ['image/png', 'image/jpeg', 'image/gif'];

            if (!in_array($request->image->getMimeType(), $allow_types)) {
                return ['status' => 0, 'msg' => '图片类型不正确！'];
            }

            if ($request->image->getClientSize() > 1024 * 1024 * 3) {
                return ['status' => 0, 'msg' => '图片大小不能超过 3M！'];
            }

            $path = $request->image->store('public/images');
            //上传到本地
            return ['status' => 1, 'msg' => '/storage' . str_replace('public', '', $path)];
        }
    }