首先先看下效果图

这是添加的时候 可以上传照片

这是编辑的时候 可以修改照片

代码部分:

先看控制器:

/***
   * 添加商户
   * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
   */
  public function add()
  {
 
    $data = null;
    return _view('admin.merchant.merchant.edit', compact('data'));
  }
 
  /***
   * 添加商户
   * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
   */
  public function store(StoreMenchantRequest $request)
  {
    //判断手机号是否重复 重复不能添加
    //后面开发可能会去掉这个判断
    $merchant = Merchant::where('mobile', $request->mobile)->first();
    if (!empty($merchant)) {
      return back()->withErrors('该用户已存在');
    }
    $token = str_random(60);
    $api_token = $this->getToken($token);
    $newMerchantData = [
      'mobile' => $request->mobile,
      'api_token' => $api_token,
    ];
    DB::beginTransaction();
    $newMerchant = Merchant::create($newMerchantData);
    $newData = [
      'merchant_id' => $newMerchant->id,//Merchantid
      'merchant_principal' => $request->merchant_principal,//负责人
      'merchant_name' => $request->merchant_name,//商家名称
      'merchant_short_name' => $request->merchant_short_name,//商家简称
      'merchant_address' => $request->merchant_address,//商家地址
      'business_num' => $request->business_num,//注册号
      'business_address' => $request->business_address,//营业地址
      'business_name' => $request->business_name,//营业执照名称
      'business_person' => $request->person,//营业执照法人
      'identity_name' => $request->person,//身份证姓名
      'identity_num' => $request->identity_num,//身份证号
    ];
    //上传缩略图
    $input = $request->all();
    if (isset($input['file']) && is_object($input['file'])) {
 
      $file_name = save_image_file($input['file'], 'merchant_infos');
      if (!$file_name) {
        return back()->with('msg', '图片上传失败,请重试!');
      }
//      dd($file_name);
      $input['thumbnail'] = $file_name;
      unset($input['_token']);
      unset($input['file']);
    } else {
      return back()->with('msg', '请上传图片');
    }
    //上传内景图1
    if (isset($input['image1']) && is_object($input['image1'])) {
 
      $file_name_1 = save_image_file($input['image1'], 'merchant_infos');
      if (!$file_name_1) {
        return back()->with('msg', '图片上传失败,请重试!');
      }
 
      $input['interior_figure_one'] = $file_name_1;
      unset($input['_token']);
      unset($input['image1']);
    } else {
      return back()->with('msg', '请上传图片');
    }
    //上传内景图2
    if (isset($input['image2']) && is_object($input['image2'])) {
 
      $file_name_2 = save_image_file($input['image2'], 'merchant_infos');
      if (!$file_name_2) {
        return back()->with('msg', '图片上传失败,请重试!');
      }
      $input['interior_figure_two'] = $file_name_2;
      unset($input['_token']);
      unset($input['image2']);
    } else {
      return back()->with('msg', '请上传图片');
    }
    //上传内景图3
    if (isset($input['image3']) && is_object($input['image3'])) {
 
      $file_name_3 = save_image_file($input['image3'], 'merchant_infos');
      if (!$file_name_3) {
        return back()->with('msg', '图片上传失败,请重试!');
      }
      $input['interior_figure_three'] = $file_name_3;
      unset($input['_token']);
      unset($input['image3']);
    } else {
      return back()->with('msg', '请上传图片');
    }
 
    $merchantInfo = MerchantInfo::where('merchant_id', $newMerchant->id)->first();
    if (!empty($merchantInfo)) {
      return back()->withErrors('该用户已录入信息');
    }
    $homestayInfo = HomestayInfo::where('merchant_id', $newMerchant->id)->first();
    if (!empty($homestayInfo)) {
      return back()->withErrors('该用户已录入信息');
    }
    //录入商户信息
    $newData['thumbnail'] = $input['thumbnail'];
    $newData['interior_figure_one'] = $input['interior_figure_one'];
    $newData['interior_figure_two'] = $input['interior_figure_two'];
    $newData['interior_figure_three'] = $input['interior_figure_three'];
    $newData['content'] = $input['content'];
    $newMerchantInfo = MerchantInfo::create($newData);
    $newHomestayInfo = HomestayInfo::create($newData);
    if ($newMerchantInfo && $newHomestayInfo && $newMerchant) {
      DB::commit();
      admin_action_logs($newMerchant, "添加商户成功");
      return redirect()->route('admin.merchant.index')->with('msg', '添加成功');
    } else {
      DB::rollback();
      return back()->withErrors('添加失败,请联系管理员');
    }
 
 
  }

这边封装了一个上传图片的方法,调用即可

**
 * 调用的文件中需要 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>

编辑这边 的控制器代码是:

/***
 * 添加图片
 * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
 */
public function add_img()
{
  $data = null;
  return _view('admin.merchant.merchant.add', compact('data'));
}
 
/***
 * 保存图片
 * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
 */
public function add_img_store(Request $request)
{
  //上传缩略图
  $input = $request->all();
 
  if (isset($input['file']) && is_object($input['file'])) {
 
    $file_name = save_image_file($input['file'], 'merchant_infos');
    if (!$file_name) {
      return back()->with('msg', '图片上传失败,请重试!');
    }
 
    $input['thumbnail'] = $file_name;
    unset($input['_token']);
    unset($input['file']);
  } else {
    return back()->with('msg', '请上传图片');
  }
  //上传内景图1
  if (isset($input['image1']) && is_object($input['image1'])) {
 
    $file_name_1 = save_image_file($input['image1'], 'merchant_infos');
    if (!$file_name_1) {
      return back()->with('msg', '图片上传失败,请重试!');
    }
 
    $input['interior_figure_one'] = $file_name_1;
    unset($input['_token']);
    unset($input['image1']);
  } else {
    return back()->with('msg', '请上传图片');
  }
  //上传内景图2
  if (isset($input['image2']) && is_object($input['image2'])) {
 
    $file_name_2 = save_image_file($input['image2'], 'merchant_infos');
    if (!$file_name_2) {
      return back()->with('msg', '图片上传失败,请重试!');
    }
    $input['interior_figure_two'] = $file_name_2;
    unset($input['_token']);
    unset($input['image2']);
  } else {
    return back()->with('msg', '请上传图片');
  }
  //上传内景图3
  if (isset($input['image3']) && is_object($input['image3'])) {
 
    $file_name_3 = save_image_file($input['image3'], 'merchant_infos');
    if (!$file_name_3) {
      return back()->with('msg', '图片上传失败,请重试!');
    }
    $input['interior_figure_three'] = $file_name_3;
    unset($input['_token']);
    unset($input['image3']);
  } else {
    return back()->with('msg', '请上传图片');
  }
  //录入商户信息
 
  $merchang_info = MerchantInfo::where('merchant_id', '=', $input['id'])->first();
  if (empty($merchang_info)) {
    $newData['thumbnail'] = $input['thumbnail'];
    $newData['merchant_id'] = $input['id'];
    $newData['interior_figure_one'] = $input['interior_figure_one'];
    $newData['interior_figure_two'] = $input['interior_figure_two'];
    $newData['interior_figure_three'] = $input['interior_figure_three'];
    $newData['content']='';
    $result = MerchantInfo::create($newData);
  } /* $newData['thumbnail']=$input['thumbnail'];
  $newData['interior_figure_one']=$input['interior_figure_one'];
  $newData['interior_figure_two']=$input['interior_figure_two'];
  $newData['interior_figure_three']=$input['interior_figure_three'];
  // $newData['content']=$input['content'];
  $newMerchantInfo = MerchantInfo::create($newData);*/
  else {
    $merchang_info->thumbnail = $input['thumbnail']??'';
    $merchang_info->interior_figure_one = $input['interior_figure_one']??'';
    $merchang_info->interior_figure_two = $input['interior_figure_two']??'';
    $merchang_info->interior_figure_three = $input['interior_figure_three']??'';
    $result = $merchang_info->save();
  }
  if ($result) {
    DB::commit();
    admin_action_logs($result, "编辑商户成功");
    return redirect()->route('admin.merchant.index')->with('msg', '编辑成功');
  } else {
    DB::rollback();
    return back()->withErrors('编辑失败,请联系管理员');
  }
}

以上这篇laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持Devmax。

laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子的更多相关文章

  1. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  2. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  3. 微信小程序如何获取图片宽度与高度

    这篇文章主要给大家介绍了关于微信小程序如何获取图片宽度与高度的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  4. 利用Python上传日志并监控告警的方法详解

    这篇文章将详细为大家介绍如何通过阿里云日志服务搭建一套通过Python上传日志、配置日志告警的监控服务,感兴趣的小伙伴可以了解一下

  5. iview+vue实现导入EXCEL预览功能

    这篇文章主要为大家详细介绍了iview+vue实现导入EXCEL预览功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  6. PHP实现文件上传与下载实例与总结

    这篇文章主要介绍了PHP实现文件上传与下载实例与总结的相关资料,需要的朋友可以参考下

  7. 小程序实现图片裁剪上传

    这篇文章主要为大家详细介绍了小程序实现图片裁剪上传,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  8. js实现头像上传并且可预览提交

    这篇文章主要介绍了js如何实现头像上传并且可预览提交,帮助大家更好的理解和使用js,感兴趣的朋友可以了解下

  9. Laravel自动生成UUID,从建表到使用详解

    今天小编就为大家分享一篇Laravel自动生成UUID,从建表到使用详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

  10. laravel框架模型中非静态方法也能静态调用的原理分析

    这篇文章主要介绍了laravel框架模型中非静态方法也能静态调用的原理,结合实例形式分析了laravel模型基类中使用魔术方法实现非静态方法进行静态调用的相关原理,需要的朋友可以参考下

随机推荐

  1. PHP个人网站架设连环讲(一)

    先下一个OmnihttpdProffesinalV2.06,装上就有PHP4beta3可以用了。PHP4给我们带来一个简单的方法,就是使用SESSION(会话)级变量。但是如果不是PHP4又该怎么办?我们可以假设某人在15分钟以内对你的网页的请求都不属于一个新的人次,这样你可以做个计数的过程存在INC里,在每一个页面引用,访客第一次进入时将访问时间送到cookie里。以后每个页面被访问时都检查cookie上次访问时间值。

  2. PHP函数学习之PHP函数点评

    PHP函数使用说明,应用举例,精简点评,希望对您学习php有所帮助

  3. ecshop2.7.3 在php5.4下的各种错误问题处理

    将方法内的函数,分拆为2个部分。这个和gd库没有一点关系,是ecshop程序的问题。会出现这种问题,不外乎就是当前会员的session或者程序对cookie的处理存在漏洞。进过本地测试,includes\modules\integrates\ecshop.php这个整合自身会员的类中没有重写integrate.php中的check_cookie()方法导致,验证cookie时返回的username为空,丢失了登录状态,在ecshop.php中重写了此方法就可以了。把他加到ecshop.php的最后面去就可

  4. NT IIS下用ODBC连接数据库

    $connection=intodbc_connect建立数据库连接,$query_string="查询记录的条件"如:$query_string="select*fromtable"用$cur=intodbc_exec检索数据库,将记录集放入$cur变量中。再用while{$var1=odbc_result;$var2=odbc_result;...}读取odbc_exec()返回的数据集$cur。最后是odbc_close关闭数据库的连接。odbc_result()函数是取当前记录的指定字段值。

  5. PHP使用JpGraph绘制折线图操作示例【附源码下载】

    这篇文章主要介绍了PHP使用JpGraph绘制折线图操作,结合实例形式分析了php使用JpGraph的相关操作技巧与注意事项,并附带源码供读者下载参考,需要的朋友可以参考下

  6. zen_cart实现支付前生成订单的方法

    这篇文章主要介绍了zen_cart实现支付前生成订单的方法,结合实例形式详细分析了zen_cart支付前生成订单的具体步骤与相关实现技巧,需要的朋友可以参考下

  7. Thinkphp5框架实现获取数据库数据到视图的方法

    这篇文章主要介绍了Thinkphp5框架实现获取数据库数据到视图的方法,涉及thinkPHP5数据库配置、读取、模型操作及视图调用相关操作技巧,需要的朋友可以参考下

  8. PHP+jquery+CSS制作头像登录窗(仿QQ登陆)

    本篇文章介绍了PHP结合jQ和CSS制作头像登录窗(仿QQ登陆),实现了类似QQ的登陆界面,很有参考价值,有需要的朋友可以了解一下。

  9. 基于win2003虚拟机中apache服务器的访问

    下面小编就为大家带来一篇基于win2003虚拟机中apache服务器的访问。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  10. Yii2中组件的注册与创建方法

    这篇文章主要介绍了Yii2之组件的注册与创建的实现方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下

返回
顶部