laravel7 图片上传及视图显示
1:修改框架config下的文件filesystems.php中的配置;
原文件
<?php return [ /*
|--------------------------------------------------------------------------
| Default Filesystem Disk
|--------------------------------------------------------------------------
|
| Here you may specify the default filesystem disk that should be used
| by the framework. The "local" disk, as well as a variety of cloud
| based disks are available to your application. Just store away!
|
*/ 'default' => env('FILESYSTEM_DRIVER', 'local'), /*
|--------------------------------------------------------------------------
| Default Cloud Filesystem Disk
|--------------------------------------------------------------------------
|
| Many applications store files both locally and in the cloud. For this
| reason, you may specify a default "cloud" driver here. This driver
| will be bound as the Cloud disk implementation in the container.
|
*/ 'cloud' => env('FILESYSTEM_CLOUD', 's3'), /*
|--------------------------------------------------------------------------
| Filesystem Disks
|--------------------------------------------------------------------------
|
| Here you may configure as many filesystem "disks" as you wish, and you
| may even configure multiple disks of the same driver. Defaults have
| been setup for each driver as an example of the required options.
|
| Supported Drivers: "local", "ftp", "sftp", "s3"
|
*/ 'disks' => [ 'local' => [
'driver' => 'local',
'root' => storage_path('app'),
], 'public' => [
'driver' => 'local',
'root' => storage_path('app/public'),
'url' => env('APP_URL').'/storage',
'visibility' => 'public',
], 's3' => [
'driver' => 's3',
'key' => env('AWS_ACCESS_KEY_ID'),
'secret' => env('AWS_SECRET_ACCESS_KEY'),
'region' => env('AWS_DEFAULT_REGION'),
'bucket' => env('AWS_BUCKET'),
'url' => env('AWS_URL'),
], ], /*
|--------------------------------------------------------------------------
| Symbolic Links
|--------------------------------------------------------------------------
|
| Here you may configure the symbolic links that will be created when the
| `storage:link` Artisan command is executed. The array keys should be
| the locations of the links and the values should be their targets.
|
*/ 'links' => [
public_path('storage') => storage_path('app/public'),
], ];
修改的文件
<?php
return [
/*
|--------------------------------------------------------------------------
| Default Filesystem Disk
|--------------------------------------------------------------------------
|
| Here you may specify the default filesystem disk that should be used
| by the framework. The "local" disk, as well as a variety of cloud
| based disks are available to your application. Just store away!
|
*/
'default' => env('FILESYSTEM_DRIVER', 'local'),
/*
|--------------------------------------------------------------------------
| Default Cloud Filesystem Disk
|--------------------------------------------------------------------------
|
| Many applications store files both locally and in the cloud. For this
| reason, you may specify a default "cloud" driver here. This driver
| will be bound as the Cloud disk implementation in the container.
|
*/
'cloud' => env('FILESYSTEM_CLOUD', 's3'),
/*
|--------------------------------------------------------------------------
| Filesystem Disks
|--------------------------------------------------------------------------
|
| Here you may configure as many filesystem "disks" as you wish, and you
| may even configure multiple disks of the same driver. Defaults have
| been setup for each driver as an example of the required options.
|
| Supported Drivers: "local", "ftp", "sftp", "s3"
|
*/
'disks' => [
'local' => [
'driver' => 'local',
'root' => public_path(),
],
'public' => [
'driver' => 'local',
'root' => public_path(),
'url' => env('APP_URL').'/storage',
'visibility' => 'public',
],
's3' => [
'driver' => 's3',
'key' => env('AWS_ACCESS_KEY_ID'),
'secret' => env('AWS_SECRET_ACCESS_KEY'),
'region' => env('AWS_DEFAULT_REGION'),
'bucket' => env('AWS_BUCKET'),
'url' => env('AWS_URL'),
],
],
/*
|--------------------------------------------------------------------------
| Symbolic Links
|--------------------------------------------------------------------------
|
| Here you may configure the symbolic links that will be created when the
| `storage:link` Artisan command is executed. The array keys should be
| the locations of the links and the values should be their targets.
|
*/
'links' => [
public_path('storage') => storage_path('app/public'),
public_path('img') => public_path('img'),
],
];
然后书写路由:
Route::group(['namespace' => 'exam1'], function(){
// 菜单添加
Route::get('create','ExamController@create');
// 菜单保存
Route::post('store','ExamController@store');
// 菜单展示
Route::get('index','ExamController@index');
// 菜单删除
Route::get('del/{id}','ExamController@del');
});
视图:
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>图片:</label>
<div class="formControls col-xs-8 col-sm-9">
<input type="file" class="input-text" value="" placeholder="" id="adminName" name="img">
</div>
</div>
添加至控制器store方法中:
public function store(Request $request){
// 接值
$params=$request->except('_token');
// 文件上传
$img=$request->file('img');
// 保存文件
$params['img']=$img->store(date('Y-m-d')."/".'img');
$params['img']="/".$params['img'];
/*文件上传
* $path= url('').'/'. $img->store('img');
$params['img']=$path;
* */
//添加入库
$res=Exam::create($params);
if (!$res){
return redirect('create')->withErrors(['error'=>'添加失败']);
}
return redirect('index')->with(['success'=>'添加成功']);
}
列表展示“:
<tbody>
@foreach($data as $item)
<tr class="text-c">
<td>{{$item->id}}</td>
<td>{{$item->name}}</td>
<td>{{$item->categoy}}</td>
{{-- <td><img src="{{\Illuminate\Support\Facades\URL::asset($item->img)}}" alt=""></td>--}}
<td><img src="{{$item->img}}" alt="" style="width: 100px" height="100px"></td>
<td>{{$item->price}}</td>
<td><a href="/del/{{$item->id}}">删除</a></td>
{{-- <td class="f-14 td-manage"><a style="text-decoration:none" onClick="article_stop(this,'10001')" href="javascript:;" title="下架">--}}
{{-- <i class="Hui-iconfont"></i></a> <a style="text-decoration:none" class="ml-5" onClick="article_edit('资讯编辑','article-add.html','10001')" href="javascript:;" title="编辑"><i class="Hui-iconfont"></i></a> <a style="text-decoration:none" class="ml-5" onClick="article_del(this,{{$item->id}})" href="javascript:;" title="删除"><i class="Hui-iconfont"></i></a></td>--}}
</tr>
@endforeach
</tbody>
效果图:

laravel7 图片上传及视图显示的更多相关文章
- springmvc的图片上传与导出显示
1.前端文件上传需要在form表单内添加enctype="multipart/form-data" ,以二进制传递: 2.web.xml文件内配置 <servlet-mapp ...
- 微擎 plugin 时间插件 图片上传插件不显示 报错 影响下面执行
可能是版本更新导致的,之前可能不需要 load()->func('tpl');这个方法 现在加上 load()->func('tpl');应该就可以了
- input file 图片上传
使用第三方:jquery.ajaxfileupload.jsinput中的name根据后端来定 <form method="post" enctype="multi ...
- DWZ集成的xhEditor编辑器浏览本地图片上传的设置
有关xhEditor的文件上传配置官方文档链接:http://i.hdu.edu.cn/dcp/dcp/comm/xheditor/demos/demo08.html 一.xhEditor图片上传的配 ...
- Silverlight中的拖拽实现的图片上传
原文 http://blog.csdn.net/dujingjing1230/article/details/5443003 在Silverlight中因为可以直接从系统的文件夹里面拖出来一个文件直接 ...
- Django文件上传【单个/多个图片上传】
准备工作 python:3.6.8 django:2.2.1 新建django项目 确定项目名称.使用的虚拟环境[当然这个也可以后期修改].app的名称 创建成功,选择在新的窗口中打开 图片上传 修改 ...
- html5 图片上传,支持图片预览、压缩、及进度显示,兼容IE6+及标准浏览器
以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上 ...
- springmvc上传图片并显示图片--支持多图片上传
实现上传图片功能在Springmvc中很好实现.现在我将会展现完整例子. 开始需要在pom.xml加入几个jar,分别是: <dependency> <groupId>comm ...
- MVC图片上传并显示缩略图
前面已经说了怎么通过MVC来上传文件,那么这次就说说如何上传图片然后显示缩略图,这个的实用性还是比较大.用UpLoad文件夹来保存上传的图片,而Temp文件夹来保存缩略图,前面文件上传部分就不再重复了 ...
随机推荐
- 社交网络分析的 R 基础:(三)向量、矩阵与列表
在第二章介绍了 R 语言中的基本数据类型,本章会将其组装起来,构成特殊的数据结构,即向量.矩阵与列表.这些数据结构在社交网络分析中极其重要,本质上对图的分析,就是对邻接矩阵的分析,而矩阵又是由若干个向 ...
- SpringMVC 解析(二)DispatcherServlet
在我的关于Tomcat容器介绍的文章中,介绍了Tomcat容器的工作原理,我们知道Tomcat容器在收到请求之后,会把请求处理为Request/Response对象,交给Servlet实例处理.对于S ...
- Python属性描述符
实现了__get__.set.__delete__中任意一个方法的类,称之为属性描述符. 属性描述符可以控制属性操作时的一些行为. 只要具有__get__方法的类就是描述符类. 如果一个类中具有__g ...
- TCP的报文详细解读
这张图好像挺有名的,其实一开始我看见的时候是一脸懵逼的,但是通过翻书(大学时代最害怕的计算机网络),查阅他人博客等等办法,最后终于有了一个系统的了解,当然,这里知识点多而杂,大家可以多看几遍,结合上面 ...
- MATLAB 机器人学工具箱(Robotics Toolbox )sl_drivepoint 模型 consecutive zero crossings 问题
操作环境 工具箱:Robotics Toolbox for MATLAB 版本 10.2.1 作者 Peter Corke MATLAB版本:R2018a 操作系统:win10 问题 sl_drive ...
- Cadence物理库 LEF 文件语法学习【持续更新】
我是 雪天鱼,一名FPGA爱好者,研究方向是FPGA架构探索. 关注公众号,拉你进"IC设计交流群". @ 目录 一.LEF简介 1.1 通用规则 1.2 管理 LEF 文件 二. ...
- ajax请求egg用nginx转发跨域问题
火狐浏览器报的 谷歌浏览器报的 前提: npm i egg-cors --save config 文件下的pulgin.js 已经添加 //启用跨域支持 exports.cors = { enable ...
- [GWCTF 2019]re3 wp
[GWCTF 2019]re3 关键点:AES MD5 动态调试 smc自解密 gdb使用 跟进main函数 发现一个典型smc异或自解密 可以用idc脚本 或者python patch 或者动态调试 ...
- Linux性能优化实战(二)
一.CPU使用率过高 1,CPU使用率 a>节拍率 为了维护CPU时间,Linux通过事先定义的节拍率(内核中表示为HZ),触发时间中断,并使用全局变量Jiffies记录开机以来的节拍数.每发生 ...
- 矩阵LU分解
有如下方程组 ,当矩阵 A 各列向量互不相关时, 方程组有位移解,可以使用消元法求解,具体如下: 使用消元矩阵将 A 变成上三角矩阵 , , 使用消元矩阵作用于向量 b,得到向量 c,, , Ax=b ...