以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. Vue.js 源码分析(五) 基础篇 方法 methods属性详解

    methods中定义了Vue实例的方法,官网是这样介绍的: 例如:: <!DOCTYPE html> <html lang="en"> <head&g ...

  2. golang --- fmt.printf I/O 函数格式化说明

    说明 fmt 包实现了格式化 I/O 函数,类似于 C 的 printf 和 scanf格式“占位符”衍生自 C,但比 C 更简单 常用格式化输出 fmt.Printf("start at ...

  3. 【leetcode-200 深度优先+广度优先】 岛屿数量

    给定一个由 '1'(陆地)和 '0'(水)组成的的二维网格,计算岛屿的数量.一个岛被水包围,并且它是通过水平方向或垂直方向上相邻的陆地连接而成的.你可以假设网格的四个边均被水包围. 示例 1: 输入: ...

  4. MVC+Ninject+三层架构+代码生成 -- 总结(四、數據層)

    1.數據層使用了SqlSugar 庫類 . 數據層使用了SqlSugar 庫類 ,有興趣的 可以學習  http://www.codeisbug.com/Doc/8/1133,個人覺得比EF 簡單,容 ...

  5. Python - Win10系统下Python3.x环境配置

    Win10系统下Python3.x环境配置 https://blog.csdn.net/qq_41952474/article/details/82630551

  6. ASP.NET Core使用Quartz定时调度

    在应用程序开发过程中,经常会需要定时任务调度功能,本篇博客介绍Asp.net Core如何使用Quartz完成定时调度 一.Quartz使用步骤 创建调度器scheduler,并开启 创建Job作业 ...

  7. Gin-Go学习笔记四:Gin-Web框架 文件的上传下载

    文件的上传和下载 1->文件的上传 文件的上传,采用的是uploadify.js这个插件. 本事例实现的是上传图片文件,其他的文件上传也一样. 2->文件的下载 文件的下载有两个实现的方式 ...

  8. CSS泣鬼神

    博主网站 一.CSS介绍和语法 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 每个CSS样式由两个组成部分:选择器和声明.声明又包括属性和属性值.每个声明 ...

  9. Java 关于函数式接口与Lambda表达式之间的关系

    java是一种面向对象的语言,java中的一切都是对象,即数组,每个类创建的实例也是对象.在java中定义的函数或方法不可能完全独立,也不能将方法函数作为参数或返回值给实例. 在java7及以前,我们 ...

  10. 【软件工程第三次作业】结对编程:四则运算( Java 实现)

    1. GitHub 地址 本项目由 莫少政(3117004667).余泽端(3117004679)结对完成. 项目 GitHub 地址:https://github.com/Yuzeduan/Arit ...