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. vue中router与route区别

    1.$route对象 $route对象表示当前的路由信息,包含了当前 URL 解析得到的信息.包含当前的路径,参数,query对象等. 1.    $route.path      字符串,对应当前路 ...

  2. new操作符具体干了什么呢?

    考察对new关键的深刻认识,是否对前端知识有专研,如果没有专研的人,肯定说创建了一个对象,恭喜你面试官知道你是小菜鸟来的,这次面试基本上没有太大的希望了.一定要对new过程的4个步骤非常清楚,这样才能 ...

  3. ssh中“Host key verification failed.“的解决方案

    SSH连接的时候Host key verification failed. ➜ ~ ssh root@192.168.1.88 @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ ...

  4. start方式开启服务的特点&bindService 方式开启服务的特点

      服务是在后台运行 可以理解成是没有界面的activity   定义四大组件的方式都是一样的     定义一个类继承Service     start方式开启服务的特点   特点:   (1)服务通 ...

  5. axios 之cancelToken原理以及使用

    看axios文档的时候发现cancelToken这个东东,这个是用来取消ajax请求的,一般原生的话用的是abort()这个方法.看到这玩意的第一感觉是用起来有点麻烦,但是看了内部实现,发现还是比较有 ...

  6. 一行代码为UITextField添加收键盘功能

    iOS开发中收键盘是十分常用的功能,只需一行代码即可为ViewController添加工具条收键盘功能 更重要的是使用catogory,无代码污染. 代码 // UITextField+keyboar ...

  7. 直接引入vue.js和使用vue脚手架的区别?

    脚手架工具搭建的项目是把Vue作为一个模块(如CommonJS规范的模块)对待,在源码中引入vue模块,最终需要用构建工具(如webpack)载入模块,编写代码需要require('vue'). 而直 ...

  8. desktopForWin安装

    window环境下搭建appium(win7和win10都试过,能行),这里只说了Android自动化环境.iOS自动化需要MacOS支持. 一.python环境搭建 下载Python 官网下载地址h ...

  9. 使用docker部署canal

    文章目录 mysql开启binlog mysql创建canal用户 启动canal容器 配置canal 启动canal容器 查看docker容器日志 canal-client 验证 关于canal m ...

  10. 攻防世界之Web_supersqli

    题目 本题考查sql注入传送门https://www.cnblogs.com/shacker/p/15917173.html 按照SQL注入一步一步执行 发现有2个列 然后用union select联 ...