后盾网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) {          //上传成功的图片,数组类型
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视频项目---图片上传相关推荐

  1. 后盾网lavarel视频项目---lavarel多表关联一对多操作实例

    后盾网lavarel视频项目---lavarel多表关联一对多操作实例 一.总结 一句话总结: 1.一对多中多那个部分的数据前端通过json弄到服务器 2.所有通过一操作多的时候,都要用上模型中定义的 ...

  2. 后盾网lavarel视频项目---4、lavarel和vue都是{{}}表示变量,如何解决冲突

    后盾网lavarel视频项目---4.lavarel和vue都是{{}}表示变量,如何解决冲突 一.总结 一句话总结: @{{videos}}:@符号表示lavarel不处理:textarea nam ...

  3. 后盾网lavarel视频项目---3、lavarel中子控制器继承父控制器以判断是否登录

    后盾网lavarel视频项目---3.lavarel中子控制器继承父控制器以判断是否登录 一.总结 一句话总结: 在common控制器的构造方法中验证登录中间件,其它的控制器继承common控制器 p ...

  4. 后盾网lavarel视频项目---1、数据迁移

    后盾网lavarel视频项目---1.数据迁移 一.总结 一句话总结: 1.lavarel的数据迁移比较简单,就是用php来创建数据表 2.创建迁移文件:php artisan make:migrat ...

  5. 后盾网lavarel视频项目---5、淘宝镜像cnpm的原理及如何使用

    后盾网lavarel视频项目---5.淘宝镜像cnpm的原理及如何使用 一.总结 一句话总结: 原理:把npm上面的所有软件copy过来 使用:npm install -g cnpm --regist ...

  6. 后盾网lavarel视频项目---lavarel使用模型进行增删改查操作

    后盾网lavarel视频项目---lavarel使用模型进行增删改查操作 一.总结 一句话总结: 使用模型操作常用方法 查一条:$model=Tag::find($id); 删一条:Tag::dest ...

  7. 后盾网lavarel视频项目---Laravel 安装代码智能提示扩展「laravel-ide-helper」

    后盾网lavarel视频项目---Laravel 安装代码智能提示扩展「laravel-ide-helper」 一.总结 一句话总结: laravel-ide-helper作用是:代码提示 larav ...

  8. 后盾网lavarel视频项目---laravel 使用laracasts/flash插件提示信息

    后盾网lavarel视频项目---laravel 使用laracasts/flash插件提示信息 一.总结 一句话总结: laracasts/flash插件的效果就是一个弹出的boostrap模块框, ...

  9. 后盾网lavarel视频项目---lavarel中间件(使用中间件拦截没登录的用户)

    后盾网lavarel视频项目---lavarel中间件(使用中间件拦截没登录的用户) 一.总结 一句话总结: 1.中间件中验证用户是否登录:if(!Auth::guard('admin')->c ...

最新文章

  1. ELK(ElasticSearch, Logstash, Kibana)搭建实时日志分析平台
  2. Servlet映射路径中的通配符
  3. python 包和模块的区别_3分钟带你搞懂Python模块、包的区别和使用
  4. Swift中文教程(十六) 自动引用计数
  5. LeetCode(506)——相对名次(JavaScript)
  6. python读取数据流_IOError:读取图像fi时数据流中断
  7. 洛谷P1061 Jam的计数法 数学
  8. cmd命令—windows7
  9. 大牛直播sdk简单播放端demo使用
  10. 网口压线顺序_网线怎么接头 网线水晶头的接法和排序
  11. 联想微型计算机怎么光盘启动,联想笔记本电脑win10怎么设置光盘启动
  12. 爬取豆瓣电影分类排行榜
  13. python求真分数_Python 列出最简真分数序列*
  14. 聊一聊SEO(搜索引擎优化)
  15. VBA代码助手,代码库收藏管理工具,代码对齐,破解Excel工程密码,设置隐藏模块
  16. ProxmoxVE折腾记录(二)--版本升级
  17. PMP考前冲刺题2022(正题)含解析
  18. CentOS 7 多硬盘合并 mergerfs 磁盘合并 + Duf 磁盘容量查看
  19. 宝塔面板设置HTTPS+阿里云SSL证书
  20. 金山卓越网成立的商业计划书

热门文章

  1. ios开发之UIView的frame、bounds跟center属性的区别(附图)
  2. SASS的一些使用体会(安装-配置-开启firefox的调试)
  3. 苹果App Icon的问题
  4. 云计算背后的秘密(6)-NoSQL数据库的综述
  5. 书------编程(理论方面)
  6. 基于HOG-LBP特征融合的头肩检测研究
  7. WEB前后端分离开发中的验证与安全问题
  8. 简单理解Ext.DomQuery操作CSS3选择器
  9. 玩转Excel系列-SUMIFS函数使用及实例
  10. 【Java8精华教程】一起爪哇Java8——好用的Stream