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

首先先看下效果图

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

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

代码部分:

先看控制器:

1. /***
2. * 添加商户
3. * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
4. */
5. public function add()
6. {
7.  
8. $data = null;
9. return _view('admin.merchant.merchant.edit', compact('data'));
10. }
11.  
12. /***
13. * 添加商户
14. * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
15. */
16. public function store(StoreMenchantRequest $request)
17. {
18. //判断手机号是否重复 重复不能添加
19. //后面开发可能会去掉这个判断
20. $merchant = Merchant::where('mobile', $request->mobile)->first();
21. if (!empty($merchant)) {
22. return back()->withErrors('该用户已存在');
23. }
24. $token = str_random(60);
25. $api_token = $this->getToken($token);
26. $newMerchantData = [
27. 'mobile' => $request->mobile,
28. 'api_token' => $api_token,
29. ];
30. DB::beginTransaction();
31. $newMerchant = Merchant::create($newMerchantData);
32. $newData = [
33. 'merchant_id' => $newMerchant->id,//Merchantid
34. 'merchant_principal' => $request->merchant_principal,//负责人
35. 'merchant_name' => $request->merchant_name,//商家名称
36. 'merchant_short_name' => $request->merchant_short_name,//商家简称
37. 'merchant_address' => $request->merchant_address,//商家地址
38. 'business_num' => $request->business_num,//注册号
39. 'business_address' => $request->business_address,//营业地址
40. 'business_name' => $request->business_name,//营业执照名称
41. 'business_person' => $request->person,//营业执照法人
42. 'identity_name' => $request->person,//身份证姓名
43. 'identity_num' => $request->identity_num,//身份证号
44. ];
45. //上传缩略图
46. $input = $request->all();
47. if (isset($input['file']) && is_object($input['file'])) {
48.  
49. $file_name = save_image_file($input['file'], 'merchant_infos');
50. if (!$file_name) {
51. return back()->with('msg', '图片上传失败,请重试!');
52. }
53. // dd($file_name);
54. $input['thumbnail'] = $file_name;
55. unset($input['_token']);
56. unset($input['file']);
57. } else {
58. return back()->with('msg', '请上传图片');
59. }
60. //上传内景图1
61. if (isset($input['image1']) && is_object($input['image1'])) {
62.  
63. $file_name_1 = save_image_file($input['image1'], 'merchant_infos');
64. if (!$file_name_1) {
65. return back()->with('msg', '图片上传失败,请重试!');
66. }
67.  
68. $input['interior_figure_one'] = $file_name_1;
69. unset($input['_token']);
70. unset($input['image1']);
71. } else {
72. return back()->with('msg', '请上传图片');
73. }
74. //上传内景图2
75. if (isset($input['image2']) && is_object($input['image2'])) {
76.  
77. $file_name_2 = save_image_file($input['image2'], 'merchant_infos');
78. if (!$file_name_2) {
79. return back()->with('msg', '图片上传失败,请重试!');
80. }
81. $input['interior_figure_two'] = $file_name_2;
82. unset($input['_token']);
83. unset($input['image2']);
84. } else {
85. return back()->with('msg', '请上传图片');
86. }
87. //上传内景图3
88. if (isset($input['image3']) && is_object($input['image3'])) {
89.  
90. $file_name_3 = save_image_file($input['image3'], 'merchant_infos');
91. if (!$file_name_3) {
92. return back()->with('msg', '图片上传失败,请重试!');
93. }
94. $input['interior_figure_three'] = $file_name_3;
95. unset($input['_token']);
96. unset($input['image3']);
97. } else {
98. return back()->with('msg', '请上传图片');
99. }
100.  
101. $merchantInfo = MerchantInfo::where('merchant_id', $newMerchant->id)->first();
102. if (!empty($merchantInfo)) {
103. return back()->withErrors('该用户已录入信息');
104. }
105. $homestayInfo = HomestayInfo::where('merchant_id', $newMerchant->id)->first();
106. if (!empty($homestayInfo)) {
107. return back()->withErrors('该用户已录入信息');
108. }
109. //录入商户信息
110. $newData['thumbnail'] = $input['thumbnail'];
111. $newData['interior_figure_one'] = $input['interior_figure_one'];
112. $newData['interior_figure_two'] = $input['interior_figure_two'];
113. $newData['interior_figure_three'] = $input['interior_figure_three'];
114. $newData['content'] = $input['content'];
115. $newMerchantInfo = MerchantInfo::create($newData);
116. $newHomestayInfo = HomestayInfo::create($newData);
117. if ($newMerchantInfo && $newHomestayInfo && $newMerchant) {
118. DB::commit();
119. admin_action_logs($newMerchant, "添加商户成功");
120. return redirect()->route('admin.merchant.index')->with('msg', '添加成功');
121. } else {
122. DB::rollback();
123. return back()->withErrors('添加失败，请联系管理员');
124. }
125.  
126. }

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

1. **
2. * 调用的文件中需要 use Illuminate\Support\Facades\Input; Illuminate\Support\Facades\Storage;
3. * save_image_file 保存图片文件 ,存在Storage::disk('uploads') 目录下
4. * @var $file object 上传的图片文件,具体是在 request 中的 UploadedFile 类型的对象
5. * @var $prefix_name string 可选保存的文件名前缀
6. * @var $path string 文件路径
7. * @return bool/string 如果通过验证 则返回在新的文件名
8. */
9. if (!function_exists('save_image_file')) {
10.  
11. function save_image_file(&$file, $prefix_name = '', $path = 'serve')
12. {
13. $file = isset($file) ? $file : null;
14. if ($file != null && $file->isValid()) {
15. // 获取文件相关信息
16. $originalName = $file->getClientOriginalName(); // 文件原名
17. $ext = $file->getClientOriginalExtension(); // 扩展名
18. //dd($ext);
19. $file->getClientOriginalName();
20.  
21. if ($ext == "" && $file->getClientOriginalName() == 'blob') {
22. $ext = 'png';
23. }
24. if (!preg_match('/jpg|png|gif$/is', $ext)) {
25. return false;
26. }
27. //dd($file->getRealPath());
28. $realPath = $file->getRealPath(); //临时文件的绝对路径
29. $type = $file->getClientMimeType(); // image/jpeg
30. // 上传文件
31. $filename = $prefix_name . '-' . date('Y-m-d-H-i-s') . '-' . uniqid() . '.' . $ext;
32. //dd($filename);
33. $bool = Storage::disk($path)->put($filename, file_get_contents($realPath));
34. if (!$bool) return false;
35. return $filename;
36. }
37. return false;
38. }
39. }

接下来是编辑时候 显示已经上传的图片 并且可以进行修改:

1. <div class="row">
2. <div class="col-lg-6 col-sm-8 col-xs-12">
3. <div class="panel panel-default">
4. {{ Form::open(['method'=>'post','route' => ['admin.merchant.add_img_store'],'enctype'=>'multipart/form-data']) }}
5. <div class="panel-heading">商户图片</div>
6. <div class="panel-body">
7. <input type="hidden" name="id" value="{{$data->id}}">
8. <div class=" form-group">
9. <?php $hasUrl = old_or_new_field('thumbnail', $data); ?>
10. <div class="form-group {{!$hasUrl or 'has-error'}} has-feedback">
11. <label class="control-label" for="file">
12. <span class="font-red">*</span>
13. <span>缩略图:</span>
14. <span class="font-gray">(宽高为120px:120px)：</span>
15. </label>
16. <div class="input-group">
17. @if( $hasUrl )
18. <input type="file" class="file-preview form-control" name="file" id="file" accept="image/*"
19. value="{{ old_or_new_field('thumbnail',$data) }}">
20. @else
21. <input type="file" class="file-preview form-control validate" name="file" required id="file"
22. accept="image/*"
23. value="{{ old_or_new_field('thumbnail',$data) }}">
24. @endif
25. </div>
26. </div>
27. <div class="file-preview-wrap">
28. <img
29. @if( old_or_new_field('thumbnail',$data) )
30. src="{{asset('storage/serve').'/'.old_or_new_field('thumbnail',$data)}}" data-src="{{ asset('storage/serve'.old_or_new_img('thumbnail', $data, false))}}"
31. @else
32.  
33. src="{{asset('storage/serve').'/'. (isset($data->merchantInfo->thumbnail)?$data->merchantInfo->thumbnail:' ')}}" data-src="{{ asset('storage/serve').'/'. (isset($data->merchantInfo->thumbnail)?$data->merchantInfo->thumbnail:' ')}}"
34. @endif
35. id="file-preview" class="img-thumbnail" alt="图片预览" data-magnify="gallery">
36.  
37. </div>
38. </div>
39. <div>
40. <?php $hasUrl = old_or_new_field('interior_figure_one', $data); ?>
41. <div class="form-group {{!$hasUrl or 'has-error'}} has-feedback">
42. <label class="control-label" for="file">
43. <span class="font-red">*</span>
44. <span>内景图1:</span>
45. <span class="font-gray">(宽高为375px:200px)：</span>
46. </label>
47. <div class="input-group">
48. @if( $hasUrl )
49. <input type="file" class="file-preview-second form-control" name="image1" id="image1" accept="image/*"
50. value="{{ old_or_new_field('interior_figure_one',$data) }}">
51. @else
52. <input type="file" class="file-preview-second form-control validate" name="image1" required id="image1"
53. accept="image/*"
54. value="{{ old_or_new_field('interior_figure_one',$data) }}">
55. @endif
56. </div>
57. </div>
58. <div class="file-preview-wrap">
59. <img
60. @if( old_or_new_field('interior_figure_one',$data) )
61. 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))}}"
62. @else
63. 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:'')}}"
64.  
65. @endif
66. width="375px" height="200px" id="file-preview-second" class="img-thumbnail" alt="图片预览" data-magnify="gallery">
67. </div>
68. </div>
69. <div >
70. <?php $hasUrl = old_or_new_field('interior_figure_two', $data); ?>
71. <div class="form-group {{!$hasUrl or 'has-error'}} has-feedback">
72. <label class="control-label" for="file">
73. <span class="font-red">*</span>
74. <span>内景图2:</span>
75. <span class="font-gray">(宽高为375px:200px)：</span>
76. </label>
77. <div class="input-group">
78. @if( $hasUrl )
79. <input type="file" class="file-preview-third form-control" name="image2" id="image2" accept="image/*"
80. value="{{ old_or_new_field('interior_figure_two',$data) }}">
81. @else
82. <input type="file" class="file-preview-third form-control validate" name="image2" required id="image2"
83. accept="image/*"
84. value="{{ old_or_new_field('interior_figure_two',$data) }}">
85. @endif
86. </div>
87. </div>
88. <div class="file-preview-wrap">
89. <img
90. @if( old_or_new_field('interior_figure_two',$data) )
91. {{--src="{{route('Img.uploads.file',[old_or_new_field('url',$data)])}}"--}}
92. 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))}}"
93. @else
94. 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:'')}}"
95. @endif
96. width="375px" height="200px" id="file-preview-third" class="img-thumbnail" alt="图片预览" data-magnify="gallery">
97. </div>
98. </div>
99. <div>
100. <?php $hasUrl = old_or_new_field('interior_figure_three', $data); ?>
101. <div class="form-group {{!$hasUrl or 'has-error'}} has-feedback">
102. <label class="control-label" for="file">
103. <span class="font-red">*</span>
104. <span>缩略图3:</span>
105. <span class="font-gray">(宽高为375px:200px)：</span>
106. </label>
107. <div class="input-group">
108. @if( $hasUrl )
109. <input type="file" class="file-preview-forth form-control" name="image3" id="image3" accept="image/*"
110. value="{{ old_or_new_field('interior_figure_three',$data) }}">
111. @else
112. <input type="file" class="file-preview-forth form-control validate" name="image3" required id="image3"
113. accept="image/*"
114. value="{{ old_or_new_field('interior_figure_three',$data) }}" >
115. @endif
116. </div>
117. </div>
118. <div class="file-preview-wrap">
119. <img
120. @if( old_or_new_field('interior_figure_three',$data) )
121. {{--src="{{route('Img.uploads.file',[old_or_new_field('url',$data)])}}"--}}
122. 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))}}"
123. @else
124. 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:'')}}"
125. @endif
126. width="375px" height="200px" id="file-preview-forth" class="img-thumbnail" alt="图片预览" data-magnify="gallery">
127. </div>
128. </div>
129. </div>
130.  
131. <div class="text-center margin-bottom-sm">
132. <button class="pretty-btn"> 编辑商户</button>
133. </div>
134. {{ Form::close() }}
135. </div>
136. </div>
137. </div>

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

1. /***
2. * 添加图片
3. * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
4. */
5. public function add_img()
6. {
7. $data = null;
8. return _view('admin.merchant.merchant.add', compact('data'));
9. }
10.  
11. /***
12. * 保存图片
13. * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
14. */
15. public function add_img_store(Request $request)
16. {
17. //上传缩略图
18. $input = $request->all();
19.  
20. if (isset($input['file']) && is_object($input['file'])) {
21.  
22. $file_name = save_image_file($input['file'], 'merchant_infos');
23. if (!$file_name) {
24. return back()->with('msg', '图片上传失败,请重试!');
25. }
26.  
27. $input['thumbnail'] = $file_name;
28. unset($input['_token']);
29. unset($input['file']);
30. } else {
31. return back()->with('msg', '请上传图片');
32. }
33. //上传内景图1
34. if (isset($input['image1']) && is_object($input['image1'])) {
35.  
36. $file_name_1 = save_image_file($input['image1'], 'merchant_infos');
37. if (!$file_name_1) {
38. return back()->with('msg', '图片上传失败,请重试!');
39. }
40.  
41. $input['interior_figure_one'] = $file_name_1;
42. unset($input['_token']);
43. unset($input['image1']);
44. } else {
45. return back()->with('msg', '请上传图片');
46. }
47. //上传内景图2
48. if (isset($input['image2']) && is_object($input['image2'])) {
49.  
50. $file_name_2 = save_image_file($input['image2'], 'merchant_infos');
51. if (!$file_name_2) {
52. return back()->with('msg', '图片上传失败,请重试!');
53. }
54. $input['interior_figure_two'] = $file_name_2;
55. unset($input['_token']);
56. unset($input['image2']);
57. } else {
58. return back()->with('msg', '请上传图片');
59. }
60. //上传内景图3
61. if (isset($input['image3']) && is_object($input['image3'])) {
62.  
63. $file_name_3 = save_image_file($input['image3'], 'merchant_infos');
64. if (!$file_name_3) {
65. return back()->with('msg', '图片上传失败,请重试!');
66. }
67. $input['interior_figure_three'] = $file_name_3;
68. unset($input['_token']);
69. unset($input['image3']);
70. } else {
71. return back()->with('msg', '请上传图片');
72. }
73. //录入商户信息
74.  
75. $merchang_info = MerchantInfo::where('merchant_id', '=', $input['id'])->first();
76. if (empty($merchang_info)) {
77. $newData['thumbnail'] = $input['thumbnail'];
78. $newData['merchant_id'] = $input['id'];
79. $newData['interior_figure_one'] = $input['interior_figure_one'];
80. $newData['interior_figure_two'] = $input['interior_figure_two'];
81. $newData['interior_figure_three'] = $input['interior_figure_three'];
82. $newData['content']='';
83. $result = MerchantInfo::create($newData);
84. } /* $newData['thumbnail']=$input['thumbnail'];
85. $newData['interior_figure_one']=$input['interior_figure_one'];
86. $newData['interior_figure_two']=$input['interior_figure_two'];
87. $newData['interior_figure_three']=$input['interior_figure_three'];
88. // $newData['content']=$input['content'];
89. $newMerchantInfo = MerchantInfo::create($newData);*/
90. else {
91. $merchang_info->thumbnail = $input['thumbnail']??'';
92. $merchang_info->interior_figure_one = $input['interior_figure_one']??'';
93. $merchang_info->interior_figure_two = $input['interior_figure_two']??'';
94. $merchang_info->interior_figure_three = $input['interior_figure_three']??'';
95. $result = $merchang_info->save();
96. }
97. if ($result) {
98. DB::commit();
99. admin_action_logs($result, "编辑商户成功");
100. return redirect()->route('admin.merchant.index')->with('msg', '编辑成功');
101. } else {
102. DB::rollback();
103. return back()->withErrors('编辑失败，请联系管理员');
104. }
105. }

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

原文链接：https://blog.csdn.net/zhangzeshan/article/details/81484441