后盾网lavarel视频项目---图片上传
后盾网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视频项目---图片上传相关推荐
- 后盾网lavarel视频项目---lavarel多表关联一对多操作实例
后盾网lavarel视频项目---lavarel多表关联一对多操作实例 一.总结 一句话总结: 1.一对多中多那个部分的数据前端通过json弄到服务器 2.所有通过一操作多的时候,都要用上模型中定义的 ...
- 后盾网lavarel视频项目---4、lavarel和vue都是{{}}表示变量,如何解决冲突
后盾网lavarel视频项目---4.lavarel和vue都是{{}}表示变量,如何解决冲突 一.总结 一句话总结: @{{videos}}:@符号表示lavarel不处理:textarea nam ...
- 后盾网lavarel视频项目---3、lavarel中子控制器继承父控制器以判断是否登录
后盾网lavarel视频项目---3.lavarel中子控制器继承父控制器以判断是否登录 一.总结 一句话总结: 在common控制器的构造方法中验证登录中间件,其它的控制器继承common控制器 p ...
- 后盾网lavarel视频项目---1、数据迁移
后盾网lavarel视频项目---1.数据迁移 一.总结 一句话总结: 1.lavarel的数据迁移比较简单,就是用php来创建数据表 2.创建迁移文件:php artisan make:migrat ...
- 后盾网lavarel视频项目---5、淘宝镜像cnpm的原理及如何使用
后盾网lavarel视频项目---5.淘宝镜像cnpm的原理及如何使用 一.总结 一句话总结: 原理:把npm上面的所有软件copy过来 使用:npm install -g cnpm --regist ...
- 后盾网lavarel视频项目---lavarel使用模型进行增删改查操作
后盾网lavarel视频项目---lavarel使用模型进行增删改查操作 一.总结 一句话总结: 使用模型操作常用方法 查一条:$model=Tag::find($id); 删一条:Tag::dest ...
- 后盾网lavarel视频项目---Laravel 安装代码智能提示扩展「laravel-ide-helper」
后盾网lavarel视频项目---Laravel 安装代码智能提示扩展「laravel-ide-helper」 一.总结 一句话总结: laravel-ide-helper作用是:代码提示 larav ...
- 后盾网lavarel视频项目---laravel 使用laracasts/flash插件提示信息
后盾网lavarel视频项目---laravel 使用laracasts/flash插件提示信息 一.总结 一句话总结: laracasts/flash插件的效果就是一个弹出的boostrap模块框, ...
- 后盾网lavarel视频项目---lavarel中间件(使用中间件拦截没登录的用户)
后盾网lavarel视频项目---lavarel中间件(使用中间件拦截没登录的用户) 一.总结 一句话总结: 1.中间件中验证用户是否登录:if(!Auth::guard('admin')->c ...
最新文章
- ELK(ElasticSearch, Logstash, Kibana)搭建实时日志分析平台
- Servlet映射路径中的通配符
- python 包和模块的区别_3分钟带你搞懂Python模块、包的区别和使用
- Swift中文教程(十六) 自动引用计数
- LeetCode(506)——相对名次(JavaScript)
- python读取数据流_IOError:读取图像fi时数据流中断
- 洛谷P1061 Jam的计数法 数学
- cmd命令—windows7
- 大牛直播sdk简单播放端demo使用
- 网口压线顺序_网线怎么接头 网线水晶头的接法和排序
- 联想微型计算机怎么光盘启动,联想笔记本电脑win10怎么设置光盘启动
- 爬取豆瓣电影分类排行榜
- python求真分数_Python 列出最简真分数序列*
- 聊一聊SEO(搜索引擎优化)
- VBA代码助手,代码库收藏管理工具,代码对齐,破解Excel工程密码,设置隐藏模块
- ProxmoxVE折腾记录(二)--版本升级
- PMP考前冲刺题2022(正题)含解析
- CentOS 7 多硬盘合并 mergerfs 磁盘合并 + Duf 磁盘容量查看
- 宝塔面板设置HTTPS+阿里云SSL证书
- 金山卓越网成立的商业计划书