[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">&#xe67c;</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: 100%;
    }
    #layui-upload-box li p{
        width: 100%;
        height: 22px;
        font-size: 12px;
        position: absolute;
        left: 0;
        bottom: 0;
        line-height: 22px;
        text-align: center;
        color: #fff;
        background-color: #333;
        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:999;
        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 == 0){
                    $("#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 = 10;
        //支持的上传图片类型
        $allowed_extensions = ["png", "jpg", "jpeg", "gif"];
        //返回信息json
        $data = ['code' => 200, '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 * 1024 * 1024) {
            $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' => 0,
                'msg' => '上传成功',
                'data' => $newFile,
                'url' => $downloadUrl
            ];
        } else {
            $data['data'] = $file->getErrorMessage();
        }
        return response()->json($data);
    }


}

 

本博客地址： wukong1688

本文原文地址：https://www.cnblogs.com/wukong1688/p/10988072.html

转载请著名出处！谢谢~~