后盾网lavarel视频项目---图片上传

后盾网lavarel视频项目---图片上传

一、总结

一句话总结：

前端还是普通的前端操作，前端上传图片的地址就是图片上传的路由，后端代码也很简单

    public function uploader(Request $request){
        $upload = $request->file;
        if ($upload->isValid()) {
            $path = $upload->store(date('ym'), 'attachment');
            //message是上传成功的url地址
            return ['valid' => 1, 'message' => asset('attachment/'.$path)];
        }

        return ['valid' => 0, 'message' => '上传失败文件大小不能超过2MB'];
    }

1、图片上传后端核心代码？

1、$upload = $request->file;

2、if ($upload->isValid()) {

3、$path = $upload->store(date('ym'), 'attachment');

    public function uploader(Request $request){
        $upload = $request->file;
        if ($upload->isValid()) {
            $path = $upload->store(date('ym'), 'attachment');
            //message是上传成功的url地址
            return ['valid' => 1, 'message' => asset('attachment/'.$path)];
        }

        return ['valid' => 0, 'message' => '上传失败文件大小不能超过2MB'];
    }

二、图片上传

lavarel文档位置：

https://learnku.com/docs/laravel/5.7/requests/2257#retrieving-uploaded-files

1、修改配置，设置存储引擎

config/filesystems.php

    'disks' => [

        //fry增加的
        'attachment' => [
            'driver' => 'local',
            'root' => 'attachment',
        ],

增加了attachment存储引擎

 

2、控制器中代码

app/Http/Controllers/Component/UploadController.php

<?php

namespace AppHttpControllersComponent;

use IlluminateHttpRequest;
use AppHttpControllersController;

class UploadController extends Controller
{
    public function uploader(Request $request){
        $upload = $request->file;
        if ($upload->isValid()) {
            $path = $upload->store(date('ym'), 'attachment');
            //message是上传成功的url地址
            return ['valid' => 1, 'message' => asset('attachment/'.$path)];
        }

        return ['valid' => 0, 'message' => '上传失败文件大小不能超过2MB'];
    }

    public function filesLists(){
        return ['data' => [], 'page' => ''];
    }
}

3、路由

routes/web.php

//文件上传路由
Route::any('/component/uploader','ComponentUploadController@uploader');
Route::any('/component/filesLists','ComponentUploadController@filesLists');

4、视图

                    <div class="form-group">
                        <label for="preview" class="col-sm-2 control-label">预览图</label>
                        <div class="col-sm-10">
                            <div class="input-group">
                                <input type="text" class="form-control" name="preview" readonly=""
                                       value="images/nopic.jpg" required>
                                <div class="input-group-btn">
                                    <button onclick="upImage(this)" class="btn btn-default"
                                            type="button">选择图片
                                    </button>
                                </div>
                            </div>
                            <div class="input-group" style="margin-top:5px;">
                                <img src="{{asset('images/nopic.jpg')}}"
                                     class="img-responsive img-thumbnail" width="150">
                                <em class="close" style="position:absolute; top: 0px; right: -14px;"
                                    title="删除这张图片" onclick="removeImg(this)">×</em>
                            </div>
                        </div>
                        <script>
                            //上传图片
                            function upImage(obj) {
                                require(['util'], function (util) {
                                    options = {
                                        multiple: false,//是否允许多图上传
                                    };
                                    util.image(function (images) {          //上传成功的图片，数组类型
                                        $("[name='preview']").val(images[0]);
                                        $(".img-thumbnail").attr('src', images[0]);
                                    }, options)
                                });
                            }

                            //移除图片
                            function removeImg(obj) {
                                $(obj).prev('img').attr('src', 'resource/images/nopic.jpg');
                                $(obj).parent().prev().find('input').val('');
                            }
                        </script>
                    </div>

hdjs配置

<!-- 后端js -->
<script>
    //HDJS组件需要的配置
    hdjs = {
        'base': '/node_modules/hdjs',
        'uploader': '/component/uploader',
        'filesLists': '/component/filesLists?',
        'removeImage': '?s=component/upload/removeImage&m=member&siteid=18',
        'ossSign': '?s=component/oss/sign&m=member&siteid=18',
    };
</script>
<script src="/node_modules/hdjs/require.js"></script>
<script src="/node_modules/hdjs/config.js"></script>
<link href="/css/hdcms.css" rel="stylesheet">

5、效果

 

 attachment目录下的1909里面就是上传好的图片