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

11.png

2.總路由上面設(shè)置上傳圖片的路由：

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

121.png

3.在端口打印路由，會顯示錯誤提醒你需要建控制器，根據(jù)他的路徑跑命令，建立上傳圖片的控制器。

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)];
        }
    }