博主信息
Victor的博客
博文
35
粉絲
0
評論
0
訪問量
6773
積分:0
P豆:76

laravel框架 -- 實現后臺文章封面圖的上傳功能 -- 2019年11月27日

2019年11月30日 19:29:50閱讀數:60博客 / Victor的博客 / laravel框架

在后臺內容管理中,實現內容封面配圖的上傳> 在后臺內容管理中,實現內容封面配圖的上傳

一、實現過程

1、為封面圖片的提交單獨設置一個form表單:

  1. <form id="form_image_upload" target="frame1" enctype="multipart/form-data" action="/admins/image/index" method="post" style="display: none;">
  2. @csrf
  3. <input type="file" name="file_upload" id="file_upload">
  4. </form>

2、內容信息設置的表單中,【上傳文件】的按鈕“單擊”事件 => 綁定到 上述表單中 【<input type="file">】的“單擊”事件;
3、選擇上傳圖片后,會觸發上述【input】中的onchange事件,在此事件中 提交 圖片。
4、后臺設置post信息的路由、編寫上傳文件的相關操作方法:

  1. //處理圖片上傳
  2. public function imageUpload(Request $req) {
  3. $path = $req->file('file_upload')->store('public/content');
  4. $url = Storage::url($path);
  5. $html = '<script>parent.upload_success("' . $url . '");</script>';
  6. echo $html;
  7. }

5、調用larvel的store方法,把圖片存儲到storage/app/public/content中,需要用artisan腳手架,將這里的public目錄映射到網站根目錄下:php artisan storage:link
6、在前端頁面中實現post返回js代碼中的方法:

  1. //上傳成功
  2. function upload_success(image_path){
  3. $("#pre_img").attr('src',image_path);//顯示圖片
  4. $("#imgurl").attr('value',image_path);//內容列表表單中記錄該圖片路徑
  5. }

7、內容信息列表完成后,將信息再次提交,此次提交圖片只保存路徑即可。

二、實現效果如下:

批改老師:Peter-ZhuPeter-Zhu

批改狀態:合格

老師批語:文件上傳是一個非常有用的功能

全部評論

文明上網理性發言,請遵守新聞評論服務協議

條評論
暫無評論暫無評論!
  • 足彩吧合买平台