[PHP] Laravel 5.5 圖片上傳功能

時間 2019-11-14

標籤 php laravel 5.5 圖片上傳功能欄目 PHP 简体版

原文原文鏈接

以Laravel 5.5 框架爲主，進行文件上傳功能的實現以下：php

1、配置文件修改html

打開 config/filesystems.php 文件
在 ‘disks’ 數組中添加以下代碼web

//自定義
        'uploadImg' => [
            'driver' => 'local',
            'root' => public_path('upload/images/'.date('Ymd')),
        ],

在 routes/web.php 中添加：json

//文件上傳接口，先後臺共用
Route::post('uploadImg', 'PublicController@uploadImg')->name('uploadImg');

2、調用代碼後端

這裏後臺採用 layui 框架數組

1) Html界面代碼：_form.blade.phpapp

<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) 後端存儲post

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);
    }


}