[PHP] Laravel 5.5 图片上传功能
以Laravel 5.5 框架为主,进行文件上传功能的实现如下:
一、配置文件修改
打开 config/filesystems.php 文件
在 ‘disks’ 数组中添加如下代码
//自定义
'uploadImg' => [
'driver' => 'local',
'root' => public_path('upload/images/'.date('Ymd')),
],
在 routes/web.php 中添加:
//文件上传接口,前后台共用
Route::post('uploadImg', 'PublicController@uploadImg')->name('uploadImg');
二、调用代码
这里后台采用 layui 框架
1) Html界面代码:_form.blade.php
<div class="layui-form-item">
<label for="" class="layui-form-label">缩略图</label>
<div class="layui-input-block">
<div class="layui-upload">
<button type="button" class="layui-btn" id="uploadPic"><i class="layui-icon"></i>图片上传</button>
<div class="layui-upload-list" >
<ul id="layui-upload-box" class="layui-clear">
@if(isset($article->thumb))
<li><img src="{{ $article->thumb }}" /><p>上传成功</p></li>
@endif
</ul>
<input type="hidden" name="thumb" id="thumb" value="{{ $article->thumb??'' }}">
</div>
</div>
</div>
</div>
2) js代码:_js.blade.php
<style>
#layui-upload-box li{
width: 120px;
height: 100px;
float: left;
position: relative;
overflow: hidden;
margin-right: 10px;
border:1px solid #ddd;
}
#layui-upload-box li img{
width: %;
}
#layui-upload-box li p{
width: %;
height: 22px;
font-size: 12px;
position: absolute;
left: ;
bottom: ;
line-height: 22px;
text-align: center;
color: #fff;
background-color: #;
opacity: 0.6;
}
#layui-upload-box li i{
display: block;
width: 20px;
height:20px;
position: absolute;
text-align: center;
top: 2px;
right:2px;
z-index:;
cursor: pointer;
}
</style>
<script>
layui.use(['upload'],function () {
var upload = layui.upload //普通图片上传
var uploadInst = upload.render({
elem: '#uploadPic'
,url: '{{ route("uploadImg") }}'
,multiple: false
,data:{"_token":"{{ csrf_token() }}"}
,before: function(obj){
//预读本地文件示例,不支持ie8
/*obj.preview(function(index, file, result){
$('#layui-upload-box').append('<li><img src="'+result+'" /><p>待上传</p></li>')
});*/
obj.preview(function(index, file, result){
$('#layui-upload-box').html('<li><img src="'+result+'" /><p>上传中</p></li>')
}); }
,done: function(res){
//如果上传失败
if(res.code == ){
$("#thumb").val(res.url);
$('#layui-upload-box li p').text('上传成功');
return layer.msg(res.msg);
}
return layer.msg(res.msg);
}
});
})
</script>
3) 后端存储
PublicController.php
<?php namespace App\Http\Controllers; use App\Traits\Msg;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;
use zgldh\QiniuStorage\QiniuStorage; class PublicController extends Controller
{
use Msg; //图片上传处理
public function uploadImg(Request $request)
{
//上传文件最大大小,单位M
$maxSize = ;
//支持的上传图片类型
$allowed_extensions = ["png", "jpg", "jpeg", "gif"];
//返回信息json
$data = ['code' => , 'msg' => '上传失败', 'data' => ''];
$file = $request->file('file'); //检查文件是否上传完成
if (!$file->isValid()) {
$data['msg'] = $file->getErrorMessage();
return response()->json($data);
}
//检测图片类型
$ext = $file->getClientOriginalExtension();
if (!in_array(strtolower($ext), $allowed_extensions)) {
$data['msg'] = "请上传" . implode(",", $allowed_extensions) . "格式的图片";
return response()->json($data);
}
//检测图片大小
if ($file->getClientSize() > $maxSize * * ) {
$data['msg'] = "图片大小限制" . $maxSize . "M";
return response()->json($data);
}
$disk = Storage::disk('uploadImg');
// $disk = QiniuStorage::disk('qiniu');
$newFile = uniqid() . time() . "." . $file->getClientOriginalExtension();
$res = $disk->put($newFile, file_get_contents($file->getRealPath()));
if ($res) {
$downloadUrl = env('APP_URL') . '/upload/images/' . date('Ymd') . '/' . $newFile;
$data = [
'code' => ,
'msg' => '上传成功',
'data' => $newFile,
'url' => $downloadUrl
];
} else {
$data['data'] = $file->getErrorMessage();
}
return response()->json($data);
} }
本博客地址: wukong1688
本文原文地址:https://www.cnblogs.com/wukong1688/p/10988072.html
转载请著名出处!谢谢~~
[PHP] Laravel 5.5 图片上传功能的更多相关文章
- thinkphp达到UploadFile.class.php图片上传功能
片上传在站点里是非经常常使用的功能.ThinkPHP里也有自带的图片上传类(UploadFile.class.php) 和图片模型类(Image.class.php).方便于我们去实现图片上传功能,以 ...
- Spring+SpringMVC+MyBatis+easyUI整合优化篇(七)图片上传功能
日常啰嗦 前一篇文章<Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合>讲了富文本编辑器UEditor的整合与使用 ...
- PHP语言学习之php做图片上传功能
本文主要向大家介绍了PHP语言学习之php做图片上传功能,通过具体的内容向大家展示,希望对大家学习php语言有所帮助. 今天来做一个图片上传功能的插件,首先做一个html文件:text.php < ...
- [Ting's笔记Day8]活用套件carrierwave gem:(3)Deploy图片上传功能到Heroku网站
前情提要: 身为Ruby新手村民,创造稳定且持续的学习步调很重要,我用的方法就是一周在IT邦写三篇笔记,希望藉由把笔记和遇到的bug记录下来的过程,能帮助到未来想用Ruby on Rails架站的新手 ...
- H5 利用vue实现图片上传功能。
H5的上传图片如何实现呢? 以下是我用vue实现的图片上传功能,仅供参考. <!DOCTYPE html> <html> <head> <meta chars ...
- 给DEDECMS广告管理中增加图片上传功能
dedecms的广告管理功能稍微有点次,本文就是在dedecms广告管理原有的基础上增加广告图片上传功能. 安装方法,对应自己的dedecms版本下载对应的编码然后解压把里面的文件放在后台目录覆盖即可 ...
- vue 图片上传功能
这次做了vue页面的图片上传功能,不带裁剪功能的! 首先是html代码,在input框上添加change事件,如下: <ul class="clearfix"> ...
- 前端丨如何使用 tcb-js-sdk 实现图片上传功能
前言 tcb-js-sdk 让开发者可以在网页端使用 JavaScript 代码服务访问云开发的服务,以轻松构建自己的公众号页面或者独立的网站等 Web 服务.本文将以实现图片上传功能为例,介绍 tc ...
- 改造百度UMeditor(UEditor-min)富文本编辑器的图片上传功能
最近项目需要新增一个发布文章的模块,用的是百度的Ueditor富文本编辑器. 公司用的是阿里云的图片服务器,需要直接把文章中图片上传到服务器上,但是这个编辑器的上传图片是直接上传到Tomcat的根目录 ...
随机推荐
- Linux内核中的并发与竞态概述
1.前言 众所周知,Linux系统是一个多任务的操作系统,当多个任务同时访问同一片内存区域的时候,这些任务可能会相互覆盖内存中数据,从而造成内存中的数据混乱,问题严重的话,还可能会导致系统崩溃. 2. ...
- luogu P2495 [SDOI2011]消耗战 |虚树+LCA+dp
题目描述 在一场战争中,战场由n个岛屿和n-1个桥梁组成,保证每两个岛屿间有且仅有一条路径可达.现在,我军已经侦查到敌军的总部在编号为1的岛屿,而且他们已经没有足够多的能源维系战斗,我军胜利在望.已知 ...
- 通过消息总线Spring Cloud Bus实现配置文件刷新(使用Kafka或RocketMQ)
如果需要客户端获取到最新的配置信息需要执行refresh,我们可以利用webhook的机制每次提交代码发送请求来刷新客户端,当客户端越来越多的时候,需要每个客户端都执行一遍,这种方案就不太适合了.使用 ...
- virtual DOM的作用:将DOM的维护工作由系统维护转交给virtual DOM维护
virtual DOM的作用:将DOM的维护工作由系统维护转交给virtual DOM维护 两个方面:对应用端 & 对DOM端(渲染准备的计算) 1.将DOM状态的维护工作由系统维护转交给vi ...
- 深入V8引擎-默认Platform之mac篇(2)
先说结论,V8引擎在默认Platform中初始化的这个线程是用于处理类似于setTimeout的延时任务. 另外附一些图,包括继承树.关键属性归属.纯逻辑工作流程,对代码木得兴趣的看完图可以X掉了. ...
- NoSQL之redis用法
什么是NoSQL? 泛指非关系型的数据库 不支持SQL语法 存储结构跟传统关系型数据库中的那种关系表完全不同,nosql中存储的数据都是Key-Value(即键值对关系)形式 NoSQL的世界中没有一 ...
- git操作:删除仓库中的文件或目录
假定当前分支下,abc/123.txt需要从git仓库中删除: git .txt //删除abc目录下的123.txt文件,如果要删除abc目录,使用命令:git rm -r --cached abc ...
- ES6 函数的拓展(四)
一.参数带默认值函数1.在函数形参可以赋予函数默认值[即实参严格匹配undefined时,在函数内部使用形参时调用它的默认值]2.函数name属性 [返回函数名称,无名的函数返回空字符串]3.函数le ...
- windows 提权脚本利用
本地加载: Import-Module Sherlock.ps1 远程加载: IEX (New-Object System.Net.Webclient).DownloadString('https:/ ...
- 浓缩版java8新特性
目录 一.Lambda 1.定义/设计原因 2.结构 3.规则 4.使用 二.函数式接口 1.定义 2.设计原因 3.使用 三.方法引用 1.定义/设计原因 2.使用 四.接口的默认方法 1.定义 2 ...