博主信息
Victor的博客
博文
35
粉丝
0
评论
0
访问量
7377
积分:0
P豆:76

laravel框架 -- 实现后台文章封面图的上传功能 -- 2019年11月27日

2019年11月30日 19:29:50阅读数:129博客 / 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

批改状态:合格

老师批语:文件上传是一个非常有用的功能

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
暂无评论暂无评论!
  • 第十期线上培训班