laravel实现图片上传预览,及编辑时可更换图片,并(2)
这边封装了一个上传图片的方法,调用即可
** * 调用的文件中需要 use Illuminate\Support\Facades\Input; Illuminate\Support\Facades\Storage; * save_image_file 保存图片文件 ,存在Storage::disk('uploads') 目录下 * @var $file object 上传的图片文件,具体是在 request 中的 UploadedFile 类型的对象 * @var $prefix_name string 可选保存的文件名前缀 * @var $path string 文件路径 * @return bool/string 如果通过验证 则返回在新的文件名 */ if (!function_exists('save_image_file')) { function save_image_file(&$file, $prefix_name = '', $path = 'serve') { $file = isset($file) ? $file : null; if ($file != null && $file->isValid()) { // 获取文件相关信息 $originalName = $file->getClientOriginalName(); // 文件原名 $ext = $file->getClientOriginalExtension(); // 扩展名 //dd($ext); $file->getClientOriginalName(); if ($ext == "" && $file->getClientOriginalName() == 'blob') { $ext = 'png'; } if (!preg_match('/jpg|png|gif$/is', $ext)) { return false; } //dd($file->getRealPath()); $realPath = $file->getRealPath(); //临时文件的绝对路径 $type = $file->getClientMimeType(); // image/jpeg // 上传文件 $filename = $prefix_name . '-' . date('Y-m-d-H-i-s') . '-' . uniqid() . '.' . $ext; //dd($filename); $bool = Storage::disk($path)->put($filename, file_get_contents($realPath)); if (!$bool) return false; return $filename; } return false; } }
接下来是编辑时候 显示已经上传的图片 并且可以进行修改:
<div class="row"> <div class="col-lg-6 col-sm-8 col-xs-12"> <div class="panel panel-default"> {{ Form::open(['method'=>'post','route' => ['admin.merchant.add_img_store'],'enctype'=>'multipart/form-data']) }} <div class="panel-heading">商户图片</div> <div class="panel-body"> <input type="hidden" name="id" value="{{$data->id}}"> <div class=" form-group"> <?php $hasUrl = old_or_new_field('thumbnail', $data); ?> <div class="form-group {{!$hasUrl or 'has-error'}} has-feedback"> <label class="control-label" for="file"> <span class="font-red">*</span> <span>缩略图:</span> <span class="font-gray">(宽高为120px:120px):</span> </label> <div class="input-group"> @if( $hasUrl ) <input type="file" class="file-preview form-control" name="file" id="file" accept="image/*" value="{{ old_or_new_field('thumbnail',$data) }}"> @else <input type="file" class="file-preview form-control validate" name="file" required id="file" accept="image/*" value="{{ old_or_new_field('thumbnail',$data) }}"> @endif </div> </div> <div class="file-preview-wrap"> <img @if( old_or_new_field('thumbnail',$data) ) src="{{asset('storage/serve').'/'.old_or_new_field('thumbnail',$data)}}" data-src="{{ asset('storage/serve'.old_or_new_img('thumbnail', $data, false))}}" @else src="{{asset('storage/serve').'/'. (isset($data->merchantInfo->thumbnail)?$data->merchantInfo->thumbnail:' ')}}" data-src="{{ asset('storage/serve').'/'. (isset($data->merchantInfo->thumbnail)?$data->merchantInfo->thumbnail:' ')}}" @endif id="file-preview" class="img-thumbnail" alt="图片预览" data-magnify="gallery"> </div> </div> <div> <?php $hasUrl = old_or_new_field('interior_figure_one', $data); ?> <div class="form-group {{!$hasUrl or 'has-error'}} has-feedback"> <label class="control-label" for="file"> <span class="font-red">*</span> <span>内景图1:</span> <span class="font-gray">(宽高为375px:200px):</span> </label> <div class="input-group"> @if( $hasUrl ) <input type="file" class="file-preview-second form-control" name="image1" id="image1" accept="image/*" value="{{ old_or_new_field('interior_figure_one',$data) }}"> @else <input type="file" class="file-preview-second form-control validate" name="image1" required id="image1" accept="image/*" value="{{ old_or_new_field('interior_figure_one',$data) }}"> @endif </div> </div> <div class="file-preview-wrap"> <img @if( old_or_new_field('interior_figure_one',$data) ) src="{{asset('storage/serve').'/'.old_or_new_field('interior_figure_one',$data)}}" data-src="{{ asset('storage/serve'.old_or_new_img('interior_figure_one', $data, false))}}" @else src="{{asset('storage/serve').'/'.(isset($data->merchantInfo->interior_figure_one)?$data->merchantInfo->interior_figure_one:'')}}" data-src="{{ asset('storage/serve').'/'.(isset($data->merchantInfo->interior_figure_one)?$data->merchantInfo->interior_figure_one:'')}}" @endif width="375px" height="200px" id="file-preview-second" class="img-thumbnail" alt="图片预览" data-magnify="gallery"> </div> </div> <div > <?php $hasUrl = old_or_new_field('interior_figure_two', $data); ?> <div class="form-group {{!$hasUrl or 'has-error'}} has-feedback"> <label class="control-label" for="file"> <span class="font-red">*</span> <span>内景图2:</span> <span class="font-gray">(宽高为375px:200px):</span> </label> <div class="input-group"> @if( $hasUrl ) <input type="file" class="file-preview-third form-control" name="image2" id="image2" accept="image/*" value="{{ old_or_new_field('interior_figure_two',$data) }}"> @else <input type="file" class="file-preview-third form-control validate" name="image2" required id="image2" accept="image/*" value="{{ old_or_new_field('interior_figure_two',$data) }}"> @endif </div> </div> <div class="file-preview-wrap"> <img @if( old_or_new_field('interior_figure_two',$data) ) {{--src="{{route('Img.uploads.file',[old_or_new_field('url',$data)])}}"--}} src="{{asset('storage/serve').'/'.old_or_new_field('interior_figure_two',$data)}}" data-src="{{ asset('storage/serve'.old_or_new_img('interior_figure_two', $data, false))}}" @else src="{{asset('storage/serve').'/'.(isset($data->merchantInfo->interior_figure_two)?$data->merchantInfo->interior_figure_two:'')}}" data-src="{{ asset('storage/serve').'/'.(isset($data->merchantInfo->interior_figure_two)?$data->merchantInfo->interior_figure_two:'')}}" @endif width="375px" height="200px" id="file-preview-third" class="img-thumbnail" alt="图片预览" data-magnify="gallery"> </div> </div> <div> <?php $hasUrl = old_or_new_field('interior_figure_three', $data); ?> <div class="form-group {{!$hasUrl or 'has-error'}} has-feedback"> <label class="control-label" for="file"> <span class="font-red">*</span> <span>缩略图3:</span> <span class="font-gray">(宽高为375px:200px):</span> </label> <div class="input-group"> @if( $hasUrl ) <input type="file" class="file-preview-forth form-control" name="image3" id="image3" accept="image/*" value="{{ old_or_new_field('interior_figure_three',$data) }}"> @else <input type="file" class="file-preview-forth form-control validate" name="image3" required id="image3" accept="image/*" value="{{ old_or_new_field('interior_figure_three',$data) }}" > @endif </div> </div> <div class="file-preview-wrap"> <img @if( old_or_new_field('interior_figure_three',$data) ) {{--src="{{route('Img.uploads.file',[old_or_new_field('url',$data)])}}"--}} src="{{asset('storage/serve').'/'.old_or_new_field('interior_figure_three',$data)}}" data-src="{{ asset('storage/serve'.old_or_new_img('interior_figure_three', $data, false))}}" @else src="{{asset('storage/serve').'/'.(isset($data->merchantInfo->interior_figure_three)?$data->merchantInfo->interior_figure_three:'')}}" data-src="{{ asset('storage/serve').'/'.(isset($data->merchantInfo->interior_figure_three)?$data->merchantInfo->interior_figure_three:'')}}" @endif width="375px" height="200px" id="file-preview-forth" class="img-thumbnail" alt="图片预览" data-magnify="gallery"> </div> </div> </div> <div class="text-center margin-bottom-sm"> <button class="pretty-btn"> 编辑商户</button> </div> {{ Form::close() }} </div> </div> </div>
内容版权声明:除非注明,否则皆为本站原创文章。