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. 关于obj.class.getResource()和obj.getClass().getClassLoader().getResource()的路径问题

    感谢原文作者:yejg1212 原文链接:https://www.cnblogs.com/yejg1212/p/3270152.html 注:格式内容与原文有轻微不同. Java中取资源时,经常用到C ...

  2. ARP协议工作原理

    转载请注明来源:https://www.cnblogs.com/hookjc/ ARP数据包根据接收对象不同,可分为两种:    1. 广播包(Broadcast).广播包目的MAC地址为FF-FF- ...

  3. docker平时使用异常记录

    GPU主机重启后,启动使用GPU的容器报错 docker: Error response from daemon: Unknown runtime specified nvidia. 解决办法:修改/ ...

  4. 浅谈Java正则表达式

    正则表达式我们都知道,它定义了字符串的模式,可以用来搜索.编辑或处理文本.我们在某些特定场景中用起来是非常方便的.它等于是给我们划定了一个范围,让我们可以精准的匹配到我们想要的结果.比如我想判断一个几 ...

  5. iOS组件化之-给自己的组件添加资源文件

    在 podspec 中,利用 source_files 可以指定要编译的源代码文件.可是,当我们需要把图片.音频.NIB等资源打包进 Pod 时该怎么办呢? 1.如何把资源文件打包为.bundle文件 ...

  6. SpringBoot树获取方法总结

    最近项目中有需要获取全国行政区划省-市-区县-乡镇.街道办的树状结构数据,现将自己获取树的方法总结如下,有不到之处,敬请批评指正! 一.全国行政区划数据的整理以及获取 获取地址:https://pan ...

  7. 联邦学习:按Dirichlet分布划分Non-IID样本

    我们在<Python中的随机采样和概率分布(二)>介绍了如何用Python现有的库对一个概率分布进行采样,其中的dirichlet分布大家一定不会感到陌生.该分布的概率密度函数为 \[P( ...

  8. JVM性能调优与实战基础理论篇-下

    JVM内存管理 JVM内存分配与回收策略 对象优先在Eden分配,如果Eden内存空间不足,就会发生Minor GC.虚拟机提供了-XX:+PrintGCDetails这个收集器日志参数,告诉虚拟机在 ...

  9. suse 12 脚本部署docker(二进制文件)

    suse-linux:~ # cat /etc/issue Welcome to SUSE Linux Enterprise Server 12 SP3 (x86_64) - Kernel \r (\ ...

  10. rabbit-vue3-ts-小兔鲜儿2022新版-系列开篇

    rabbit-vue3-ts-小兔鲜儿2022新版 项目使用 Vite + Vue3 + TypeScript + Pinia + VueRouter@4 进行开发. 代码检查和格式化为:ESlint ...