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 图片上传及视图显示的更多相关文章

  1. springmvc的图片上传与导出显示

    1.前端文件上传需要在form表单内添加enctype="multipart/form-data" ,以二进制传递: 2.web.xml文件内配置 <servlet-mapp ...

  2. 微擎 plugin 时间插件 图片上传插件不显示 报错 影响下面执行

    可能是版本更新导致的,之前可能不需要 load()->func('tpl');这个方法 现在加上 load()->func('tpl');应该就可以了

  3. input file 图片上传

    使用第三方:jquery.ajaxfileupload.jsinput中的name根据后端来定 <form method="post" enctype="multi ...

  4. DWZ集成的xhEditor编辑器浏览本地图片上传的设置

    有关xhEditor的文件上传配置官方文档链接:http://i.hdu.edu.cn/dcp/dcp/comm/xheditor/demos/demo08.html 一.xhEditor图片上传的配 ...

  5. Silverlight中的拖拽实现的图片上传

    原文 http://blog.csdn.net/dujingjing1230/article/details/5443003 在Silverlight中因为可以直接从系统的文件夹里面拖出来一个文件直接 ...

  6. Django文件上传【单个/多个图片上传】

    准备工作 python:3.6.8 django:2.2.1 新建django项目 确定项目名称.使用的虚拟环境[当然这个也可以后期修改].app的名称 创建成功,选择在新的窗口中打开 图片上传 修改 ...

  7. html5 图片上传,支持图片预览、压缩、及进度显示,兼容IE6+及标准浏览器

    以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上 ...

  8. springmvc上传图片并显示图片--支持多图片上传

    实现上传图片功能在Springmvc中很好实现.现在我将会展现完整例子. 开始需要在pom.xml加入几个jar,分别是: <dependency> <groupId>comm ...

  9. MVC图片上传并显示缩略图

    前面已经说了怎么通过MVC来上传文件,那么这次就说说如何上传图片然后显示缩略图,这个的实用性还是比较大.用UpLoad文件夹来保存上传的图片,而Temp文件夹来保存缩略图,前面文件上传部分就不再重复了 ...

随机推荐

  1. element-ui 使用 Select 组件给 value 属性绑定对象类型

    qq_36437172 2020-06-28 22:38:49  778  收藏 分类专栏: element-ui 文章标签: element-ui Select 组件 value 属性 绑定 对象类 ...

  2. Eclipse集成Git/SVN插件及使用

    感谢大佬:https://www.cnblogs.com/jpfss/p/8027347.html 1. Git插件安装 1.1 下载插件 首先打开Eclipse,然后点击Help>Instal ...

  3. Mybatis返回插入数据的主键的两种方式

    方式一: 需要在映射文件中添加如下片段: <insert id="insertProduct" parameterType="domain.model.Produc ...

  4. TableView载入WebView的一些小技巧 By 徐

    开发APP的时候,有时候会遇到服务器返回来的数据是一堆html内容,但是又不一定是完整的html ,可能只包含了主要内容,包括一些图片,文字等 然而我们处理带有html标签的数据时,用webview是 ...

  5. Shell脚本之编程规范和变量

    Shell脚本编程规划和变量 1.Shell脚本概述 2.Shell编程规划 3.重定向与管道 4.Shell脚本变量 1.Shell脚本概述 Shell的作用:充当"翻译官"的角 ...

  6. 第2章 selenium开发环境的搭建

    前端技术: html:网页的基础,一种标记语言,显示数据: JS:前端脚本语言,解释型语言,在页面中添加交互行为 xml:扩展标记语言,用来传输和存储数据 css:层叠样式表,用来表现HTML或XML ...

  7. 组合&反射&面向对象内置函数

    内容概要 组合 反射 面向对象的内置函数 异常 内容详细 一.组合 组合:在对象中定义一个属性,属性的值是另一个对象 除了继承父类的方法,这是获取另一个类中属性的另一种方式 如果想给学生对象添加课程属 ...

  8. Solution -「Gym 102956F」Border Similarity Undertaking

    \(\mathcal{Description}\)   Link.   给定一张 \(n\times m\) 的表格,每个格子上写有一个小写字母.求其中长宽至少为 \(2\),且边界格子上字母相同的矩 ...

  9. Solution -「JSOI2008」「洛谷 P4208」最小生成树计数

    \(\mathcal{Description}\)   link.   给定带权简单无向图,求其最小生成树个数.   顶点数 \(n\le10^2\),边数 \(m\le10^3\),相同边权的边数不 ...

  10. Solution -「USACO 2020.12 P」Spaceship

    \(\mathcal{Description}\)   Link.   Bessie 在一张含 \(n\) 个结点的有向图上遍历,站在某个结点上时,她必须按下自己手中 \(m\) 个按钮中处于激活状态 ...