任务41:解决图片的缩略图

1,\resources\views\Admin\Article\add.blade.php <form>表单增加 enctype="multipart/form-data"属性

 <form class="form-horizontal" role="form" action="{{route('admin.article.add')}}" method="post" enctype="multipart/form-data">

表单里 描述项 后 追加 上传 缩略图 项 如下

                               <div class="form-group">
                                    <label for="description" class="col-sm-2 control-label no-padding-right">描述</label>
                                    <div class="col-sm-6">
                                       <textarea class="form-control" id="description" name="description" ></textarea>

                                    </div>

                                </div>
                                <div class="form-group">
                                    <label for="pic" class="col-sm-2 control-label no-padding-right">缩略图</label>
                                    <div class="col-sm-6">
                                        <input id="pic" name="pic" type="file">
                                    </div>

                                </div>

2,同理,\resources\views\Admin\Article\edit.blade.php  的<form>表单增加 enctype="multipart/form-data"属性

<form class="form-horizontal" role="form" action="{{route('admin.article.edit',['id'=>$Article['id']])}}" method="post" enctype="multipart/form-data">

表单里 描述项 后 追加 上传 缩略图 ,和展示已有缩略图项 如下

                 <div class="form-group">
                                    <label for="pic" class="col-sm-2 control-label no-padding-right">缩略图</label>
                                    <div class="col-sm-6">

                                        @if(!empty($Article['pic']))
                                            <img src="{{asset('static/uploads/')}}{{$Article['pic']}}" alt="" width="" height="120">
                                        @endif
                                            <input id="pic" name="pic" type="file">
                                    </div>

                               </div>

3,App\Http\Controllers\Admin\ArticleController  文章控制器 主要修改了addSave()方法,editSave()方法,以及新封装了一个upImgs()的处理上传图片的方法 如下:

public function addSave(ArticleRequest $request){//Request $request 依赖注入
        //dd($request->all());   //打印接收到的数据
        $picSrc = $this->upImgs($request,'pic');
        $data = $request->all();
        $data['pic'] = $picSrc;
        $Article = Article::create($data); //Article模型create对象往数据表添加数据
        if($Article->id){
            return redirect()->route('admin.article.index')->with('success-msg','添加文章成功!');
        }else{
            return redirect()->route('admin.article.index')->with('danger-msg','添加文章失败!');
        }

    }
   public function editSave(ArticleRequest $request,int $id){
        $Article = Article::find($id);
        $Article -> title = $request->input('title');
        $Article -> keywords = $request->input('keywords');
        $Article -> description = $request->input('description');
        $Article -> cate_id = $request->input('cate_id');
        $Article -> content = $request->input('content');
        if($request->hasFile('pic')){
            $Article->pic = $this->upImgs($request,'pic');
        }
        if($Article->save()){
            return redirect()->route('admin.article.index')->with('success-msg','修改文章成功!');
        }else{
            return redirect()->back()->with('danger-msg','修改文章失败!');
        }
    }
 public function upImgs($request,$imgName){
        if($request->hasFile($imgName)){
            $file = $request->file($imgName);
            $ext = $file->getClientOriginalExtension(); //图片后缀
            $fileName = time().'.'.$ext;//设定图片保存名称

            $filePath = 'static/uploads/'.date('Ymd');//设定存放路径
            $fileInfo = $file->move(public_path($filePath),$fileName);//组装上传
            $picSrc = '/'.date('Ymd').'/'.$fileName;

        }
        $picSrc = isset($picSrc) ? $picSrc : '';
        return $picSrc;
    }

效果如下

END

猜你喜欢

转载自www.cnblogs.com/pensive/p/12923945.html