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. 【XR-2】伤痕

    不难发现,直接漫无目的地构造不是一个好的选择,因为我们并不知道选择四座城市方案的上界是什么,因此下面可以来先分析一下这个方案的上界. 首先可以考虑这使得这四个点的导出子图是强连通的方案数,但是经过尝试 ...

  2. 使用 Element UI Select 组件的 value-key 属性,让绑定值可以为一个对象

    EsunR 2019-11-07 12:14:42  12264  收藏 6 分类专栏: Vue 文章标签: element-ui 版权 当我们使用 Elemet UI 的选择组件进行多选时,Sele ...

  3. CSS布局居中

    1.把margin设置为auto,此方法只能进行水平的居中,且对浮动元素或绝对定位元素无效.

  4. json中传递数组和list

    json的数据类型:List,数组,数字,字符串,逻辑值,对象,null 1.如果json传递的是数组,格式: { "name":"网站", "num ...

  5. 【ybtoj】二分算法例题

    [基础算法]第三章 二分算法 例一 数列分段 题目描述 对于给定的一个长度为N的正整数数列A,现在将其分成M段,并要求每段连续,且每段和的最大值最小. 输入格式 第1行包含两个正整数N,M. 第2行包 ...

  6. [LeetCode]20.有效的括号(Java)

    原题地址: valid-parentheses 题目描述: 给定一个只包括 '(',')','{','}','[',']' 的字符串 s ,判断字符串是否有效. 有效字符串需满足: 左括号必须用相同类 ...

  7. ansible批量修改服务器密码

    看了一下网上代码大多数是ansible-playbook实现的,需要写一个脚本,或者手动传递变量进去. 以前用python tcp模块写过客户端主动上报修改密码脚本 今天写一个ansible主控客户端 ...

  8. 教你如何使用flask实现ajax数据入库

    摘要:在正式编写前需要了解一下如何在 python 函数中去判断,一个请求是 get 还是 post. 本文分享自华为云社区<[首发]flask 实现ajax 数据入库,并掌握文件上传>, ...

  9. k8s搭建链路监控:skywalking

    skywalking架构及简介 官网:https://github.com/apache/skywalking 简介 Java, .NET Core, NodeJS, PHP, and Python ...

  10. 思科VTP协议(后面有配置案例)

    一.VTP相关理论介绍 1.1 VTP(VLAN trunking protocol)协议是用来在整个交换网络中分发和同步VLAN数据库的,是一个二层协议,思科私有协议. 1.2 VTP域是由一台或者 ...