后盾网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 App\Http\Controllers\Component;

 use Illuminate\Http\Request;
 use App\Http\Controllers\Controller;

 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','Component\UploadController@uploader');
Route::any('/component/filesLists','Component\UploadController@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里面就是上传好的图片