以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 图片上传功能的更多相关文章

  1. thinkphp达到UploadFile.class.php图片上传功能

    片上传在站点里是非经常常使用的功能.ThinkPHP里也有自带的图片上传类(UploadFile.class.php) 和图片模型类(Image.class.php).方便于我们去实现图片上传功能,以 ...

  2. Spring+SpringMVC+MyBatis+easyUI整合优化篇(七)图片上传功能

    日常啰嗦 前一篇文章<Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合>讲了富文本编辑器UEditor的整合与使用 ...

  3. PHP语言学习之php做图片上传功能

    本文主要向大家介绍了PHP语言学习之php做图片上传功能,通过具体的内容向大家展示,希望对大家学习php语言有所帮助. 今天来做一个图片上传功能的插件,首先做一个html文件:text.php < ...

  4. [Ting's笔记Day8]活用套件carrierwave gem:(3)Deploy图片上传功能到Heroku网站

    前情提要: 身为Ruby新手村民,创造稳定且持续的学习步调很重要,我用的方法就是一周在IT邦写三篇笔记,希望藉由把笔记和遇到的bug记录下来的过程,能帮助到未来想用Ruby on Rails架站的新手 ...

  5. H5 利用vue实现图片上传功能。

    H5的上传图片如何实现呢? 以下是我用vue实现的图片上传功能,仅供参考. <!DOCTYPE html> <html> <head> <meta chars ...

  6. 给DEDECMS广告管理中增加图片上传功能

    dedecms的广告管理功能稍微有点次,本文就是在dedecms广告管理原有的基础上增加广告图片上传功能. 安装方法,对应自己的dedecms版本下载对应的编码然后解压把里面的文件放在后台目录覆盖即可 ...

  7. vue 图片上传功能

    这次做了vue页面的图片上传功能,不带裁剪功能的! 首先是html代码,在input框上添加change事件,如下:   <ul class="clearfix">   ...

  8. 前端丨如何使用 tcb-js-sdk 实现图片上传功能

    前言 tcb-js-sdk 让开发者可以在网页端使用 JavaScript 代码服务访问云开发的服务,以轻松构建自己的公众号页面或者独立的网站等 Web 服务.本文将以实现图片上传功能为例,介绍 tc ...

  9. 改造百度UMeditor(UEditor-min)富文本编辑器的图片上传功能

    最近项目需要新增一个发布文章的模块,用的是百度的Ueditor富文本编辑器. 公司用的是阿里云的图片服务器,需要直接把文章中图片上传到服务器上,但是这个编辑器的上传图片是直接上传到Tomcat的根目录 ...

随机推荐

  1. swiper轮播,添加鼠标移入事件停止轮播,移出重新开启轮播

    已测过无问题.

  2. Java8 新特性 Stream 非短路终端操作

    非短路终端操作 Java8 新特性 Stream 练习实例 非短路终端操作,就是所有的元素都遍厉完,直到最后才结束.用来收集成自己想要的数据. 方法有: 遍厉 forEach 归约 reduce 最大 ...

  3. c++小学期大作业攻略(二)整体思路+主界面

    写在前面:如果我曾经说过要在第一周之内写完大作业,那……肯定是你听错了.不过如果我在写的时候有攻略看的话应该可以轻松地在4~5天内做完,然后觉得写攻略的人是个小天使吧(疯狂暗示).出于给大家自由发挥的 ...

  4. [跨域问题]ssm+vue前后台分离跨域问题解决方法

    跨域未解决时: Access to XMLHttpRequest at 'http://localhost:8080/vue/findall from origin 'http://localhost ...

  5. 使用Net Mail发送邮件

    最近用到了发送邮件这个功能,简单记录一下案例.代码如下: using System; using System.Collections.Generic; using System.Linq; usin ...

  6. jquery validate 动态生成的多个同名input的验证

    我的应用场景是,添加和修改入库单的明细,明细是以表格的形式呈现,可以动态添加商品,用jquery.validate插件做数据验证. 由于jquery.validate插件验证同名的input时只验证第 ...

  7. 10、VUE路由技术

    1.前端路由 前端路由在很多开源的js类库框架中都得到支持,如AngularJS.Backbone.Vue.js等等. 前端路由和后端路由原理一样,是让所有的交互和展示在一个页面运行,以达到减少服务器 ...

  8. Markdown温故知新(0):导航目录

    Markdown温故知新(0):导航目录 Markdown温故知新(1):Markdown面面观 Markdown温故知新(2):详解七大标准语法 Markdown温故知新(3):六个实用扩展语法 M ...

  9. 一文读懂Java线程状态转换

    前言 本文描述Java线程线程状态及状态转换,不会涉及过多理论,主要以代码示例说明线程状态如何转换. 基础知识 1. 线程状态 Thread源码中的状态说明: 线程可以有6种状态: New(新建) R ...

  10. Java常用类StringBuffer详解

    内容多为最近学习的自我总结,可能有些地方写的不严谨,甚至会有错误的地方,仅供参考,如发现错误敬请指出,谢谢! 灰色字体为补充扩展内容,多为帮助自己理解. StringBuffer概述: 线程安全的可变 ...