后盾網(wǎng)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

1 'disks' => [ 2 3 //fry增加的 4 'attachment' => [ 5 'driver' => 'local', 6 'root' => 'attachment', 7 ],

增加了attachment存儲引擎

?

2、控制器中代碼

app/Http/Controllers/Component/UploadController.php

1 <?php 2 3 namespace App\Http\Controllers\Component; 4 5 use Illuminate\Http\Request; 6 use App\Http\Controllers\Controller; 7 8 class UploadController extends Controller 9 { 10 public function uploader(Request $request){ 11 $upload = $request->file; 12 if ($upload->isValid()) { 13 $path = $upload->store(date('ym'), 'attachment'); 14 //message是上傳成功的url地址 15 return ['valid' => 1, 'message' => asset('attachment/'.$path)]; 16 } 17 18 return ['valid' => 0, 'message' => '上傳失敗文件大小不能超過2MB']; 19 } 20 21 public function filesLists(){ 22 return ['data' => [], 'page' => '']; 23 } 24 }

?

3、路由

routes/web.php

//文件上傳路由 Route::any('/component/uploader','Component\UploadController@uploader'); Route::any('/component/filesLists','Component\UploadController@filesLists');

?

4、視圖

1 <div class="form-group"> 2 <label for="preview" class="col-sm-2 control-label">預覽圖</label> 3 <div class="col-sm-10"> 4 <div class="input-group"> 5 <input type="text" class="form-control" name="preview" readonly="" 6 value="images/nopic.jpg" required> 7 <div class="input-group-btn"> 8 <button οnclick="upImage(this)" class="btn btn-default" 9 type="button">選擇圖片 10 </button> 11 </div> 12 </div> 13 <div class="input-group" style="margin-top:5px;"> 14 <img src="{{asset('images/nopic.jpg')}}" 15 class="img-responsive img-thumbnail" width="150"> 16 <em class="close" style="position:absolute; top: 0px; right: -14px;" 17 title="刪除這張圖片" οnclick="removeImg(this)">×</em> 18 </div> 19 </div> 20 <script> 21 //上傳圖片 22 function upImage(obj) { 23 require(['util'], function (util) { 24 options = { 25 multiple: false,//是否允許多圖上傳 26 }; 27 util.image(function (images) { //上傳成功的圖片，數(shù)組類型 28 $("[name='preview']").val(images[0]); 29 $(".img-thumbnail").attr('src', images[0]); 30 }, options) 31 }); 32 } 33 34 //移除圖片 35 function removeImg(obj) { 36 $(obj).prev('img').attr('src', 'resource/images/nopic.jpg'); 37 $(obj).parent().prev().find('input').val(''); 38 } 39 </script> 40 </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里面就是上傳好的圖片

?

轉載于:https://www.cnblogs.com/Renyi-Fan/p/11546139.html

總結

以上是生活随笔為你收集整理的后盾网lavarel视频项目---图片上传的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。