后盾网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

1     'disks' => [
2 
3         //fry增加的
4         'attachment' => [
5             'driver' => 'local',
6             'root' => 'attachment',
7         ],

增加了attachment存储引擎

2、控制器中代码

app/Http/Controllers/Component/UploadController.php

 1 <?php
 2 
 3 namespace AppHttpControllersComponent;
 4 
 5 use IlluminateHttpRequest;
 6 use AppHttpControllersController;
 7 
 8 class UploadController extends Controller
 9 {
10     public function uploader(Request $request){
11         $upload = $request->file;
12         if ($upload->isValid()) {
13             $path = $upload->store(date('ym'), 'attachment');
14             //message是上传成功的url地址
15             return ['valid' => 1, 'message' => asset('attachment/'.$path)];
16         }
17 
18         return ['valid' => 0, 'message' => '上传失败文件大小不能超过2MB'];
19     }
20 
21     public function filesLists(){
22         return ['data' => [], 'page' => ''];
23     }
24 }

3、路由

routes/web.php

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

4、视图

 1                     <div class="form-group">
 2                         <label for="preview" class="col-sm-2 control-label">预览图</label>
 3                         <div class="col-sm-10">
 4                             <div class="input-group">
 5                                 <input type="text" class="form-control" name="preview" readonly=""
 6                                        value="images/nopic.jpg" required>
 7                                 <div class="input-group-btn">
 8                                     <button onclick="upImage(this)" class="btn btn-default"
 9                                             type="button">选择图片
10                                     </button>
11                                 </div>
12                             </div>
13                             <div class="input-group" style="margin-top:5px;">
14                                 <img src="{{asset('images/nopic.jpg')}}"
15                                      class="img-responsive img-thumbnail" width="150">
16                                 <em class="close" style="position:absolute; top: 0px; right: -14px;"
17                                     title="删除这张图片" onclick="removeImg(this)">×</em>
18                             </div>
19                         </div>
20                         <script>
21                             //上传图片
22                             function upImage(obj) {
23                                 require(['util'], function (util) {
24                                     options = {
25                                         multiple: false,//是否允许多图上传
26                                     };
27                                     util.image(function (images) {          //上传成功的图片，数组类型
28                                         $("[name='preview']").val(images[0]);
29                                         $(".img-thumbnail").attr('src', images[0]);
30                                     }, options)
31                                 });
32                             }
33 
34                             //移除图片
35                             function removeImg(obj) {
36                                 $(obj).prev('img').attr('src', 'resource/images/nopic.jpg');
37                                 $(obj).parent().prev().find('input').val('');
38                             }
39                         </script>
40                     </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里面就是上传好的图片