Heim > Artikel > PHP-Framework > Kapselung des universellen Datei-Uploads von ThinkPHP6.0

Kapselung des universellen Datei-Uploads von ThinkPHP6.0

wpjOriginal: 2020-05-04 11:40:138348Durchsuche

本文实例讲述了封装ThinkPHP6通用文件上传方法，上传功能使用的是LayUI的upload组件。

封装ThinkPHP6.0通用文件上传教程

一、打开项目在config文件夹下创建upload.php配置文件用来管理文件上传的后缀和大小

<?php

return [
    //定义允许上传文件后缀的数组
    &#39;suffix_arr&#39;    =>  [
        //允许图片上传的后缀
        &#39;image&#39;     =>  &#39;jpg,jpeg,png,gif&#39;,
        //允许上传文件的后缀
        &#39;file&#39;      =>  &#39;zip,gz,doc,txt,pdf,xls&#39;,
        //...
    ],
    //定义允许上传文件大小的数组
    &#39;size_arr&#39;      =>  [
        //允许图片上传的大小
        &#39;image&#39;     =>  10,
        //允许文件上传的大小
        &#39;file&#39;      =>  50
    ],
];

二、修改config\filesystem.php配置文件配置上传根目录及上传规则

<?php

return [
    // 默认磁盘
    &#39;default&#39; => env(&#39;filesystem.driver&#39;, &#39;local&#39;),
    // 磁盘列表
    &#39;disks&#39;   => [
        &#39;local&#39;  => [
            &#39;type&#39; => &#39;local&#39;,
            &#39;root&#39; => app()->getRuntimePath() . &#39;storage&#39;,
        ],
        &#39;public&#39; => [
            // 磁盘类型
            &#39;type&#39;       => &#39;local&#39;,
            // 磁盘路径
            &#39;root&#39;       => app()->getRootPath() . &#39;public/uploads&#39;,
            // 磁盘路径对应的外部URL路径
            &#39;url&#39;        => &#39;/uploads&#39;,
            // 可见性
            &#39;visibility&#39; => &#39;public&#39;,
        ],
        // 更多的磁盘配置信息
    ],
];

三、在app\controller目录下创建Upload.php类并编写upload()文件上传方法

<?php

namespace app\controller;

use think\exception\ValidateException;

class Upload
{
    //上传
    public function upload()
    {
        //判断是否是POST请求,如果是处理上传逻辑
        if (request()->isPost()){

            //接收文件上传类型
            $type = request()->param(&#39;type&#39;,&#39;&#39;,&#39;trim&#39;);
            $name = request()->param(&#39;name&#39;,&#39;&#39;,&#39;trim&#39;);
            //获取表单上传文件
            $file = request()->file(&#39;file&#39;);
            //组装文件保存目录
            $upload_dir = &#39;/&#39;.$type.&#39;/&#39;.$name;

            try {
                //从config/upload.php配置文件中读取允许上传的文件后缀和大小
                $suffix_config = config(&#39;upload.suffix_arr&#39;);
                $size_config = config(&#39;upload.size_arr&#39;);

                if (empty($size_config[$type]) || empty($size_config[$type])){
                    return false;
                }else{
                    $suffix = $suffix_config[$type];
                    $size = $size_config[$type];
                }
                //验证器验证上传的文件
                validate([&#39;file&#39;=>[
                    //限制文件大小
                    &#39;fileSize&#39;      =>  $size * 1024 * 1024,
                    //限制文件后缀
                    &#39;fileExt&#39;       =>  $suffix
                ]],[
                    &#39;file.fileSize&#39; =>  &#39;上传的文件大小不能超过&#39;.$size.&#39;M&#39;,
                    &#39;file.fileExt&#39;  =>  &#39;请上传后缀为:&#39;.$suffix.&#39;的文件&#39;
                ])->check([&#39;file&#39;=>$file]);

                //上传文件到本地服务器
                $filename = \think\facade\Filesystem::disk(&#39;public&#39;)->putFile($upload_dir, $file);
                if ($filename){
                    $src = &#39;/uploads/&#39;.$filename;
                    return json([&#39;code&#39;=>1,&#39;result&#39;=>$src]);
                }else{
                    return json([&#39;code&#39;=>0,&#39;msg&#39;=>&#39;上传失败&#39;]);
                }
            }catch (ValidateException $e){
                return json([&#39;code&#39;=>0,&#39;msg&#39;=>$e->getMessage()]);
            }
        }else{
            return json([&#39;code&#39;=>0,&#39;msg&#39;=>&#39;非法请求&#39;]);
        }
    }
}

四、打开app\controller\Index.php类并修改index方法

<?php

namespace app\controller;

use app\BaseController;

class Index extends BaseController
{
    public function index()
    {
        //渲染前端页面
        return view();
    }
}

五、在app\view\index目录下创建index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件上传</title>
    <!-- layui.css 推荐使用本地文件 -->
    <link rel="stylesheet" href="https://heerey525.github.io/layui-v2.4.3/layui-v2.4.4/css/layui.css"  media="all">
    <style>
        #avatar_thumb {
            position: absolute;
            left: 50%;top: 50%;
            width: 168px;
            height: 168px;
            margin: -50px 0 0 -84px;
            border-radius: 100%;
        }
    </style>
</head>
<body>

<div class="layui-card-body" style="text-align: center;">
    <div class="layui-form-item">
        <div style="position: relative;width: 373px;height: 373px;background-color: #F2F2F5;margin: auto;">
            <button type="button" class="layui-btn" id="avatar">
                <i class="layui-icon">&#xe67c;</i>上传头像
            </button>
            <img  src="" id="avatar_thumb" alt="Kapselung des universellen Datei-Uploads von ThinkPHP6.0" >
            <input type="hidden" name="avatar" value="">
        </div>
    </div>
</div>

<!-- layui.js 和jquery.js 推荐使用本地文件 -->
<script src="https://heerey525.github.io/layui-v2.4.3/layui-v2.4.4/layui.js" charset="utf-8"></script>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script src="/static/lib/js/common.js"></script>
<script>
    layui.use([&#39;form&#39;, &#39;upload&#39;], function() {
        var upload = layui.upload;

        //图片上传
        common_upload(&#39;avatar&#39;);

        //文件上传
        //common_upload(&#39;avatar&#39;,&#39;file&#39;);
    });
</script>
</body>
</html>

六、在public\static\lib\js目录下创建common.js

/**
 * @desc 通用文件上传
 * @param name  文件存储文件夹
 * @param type 文件类型：默认为图片类型(image)
 */
function common_upload(name,type=&#39;image&#39;) {

    layui.use([&#39;form&#39;, &#39;upload&#39;], function() {
        var upload = layui.upload;

        //选完文件后自动上传
        upload.render({
            elem: &#39;#&#39;+name,
            url: "/upload/upload",
            auto: true,
            accept: &#39;file&#39;, //普通文件
            data:{name:name,type:type},
            
            done: function(data) {
                console.log(data);
                //上传完毕回调
                if (data.code == 0) {
                    return layer.msg(data.msg,{icon:2});
                } else {
                    $("#"+name+"_thumb").attr(&#39;src&#39;,data.result).show();
                    $(&#39;input[name=&#39;+name+&#39;]&#39;).val(data.result);
                }
            }
        });
    });
}

七、测试图片上传

7.1、为了方便，本文就不在本地部署项目了，采用ThinkPHP内置的服务器

进到项目根目录，执行以下命令：

php think run