Layui+thinkPHP6.0文件上传

骜蛟

已于 2023-05-26 13:10:15 修改

阅读量3k

点赞数 5

分类专栏：排错与其他文章标签： php layui

于 2021-01-28 16:29:55 首次发布

本文链接：https://blog.csdn.net/weixin_43538042/article/details/113347415

版权

排错与其他专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文介绍了使用Layui前端框架进行异步文件上传，结合ThinkPHP6.0后端实现的过程，包括前端Layui的上传逻辑、前端代码解析、后端ThinkPHP6.0的文件处理及验证方法。重点讨论了在实际操作中遇到的坑，如前端文件名的设定、后端验证规则的编写以及文件保存路径的配置，并提供了错误排查的建议，如调整php.ini配置以允许大文件上传。

摘要由CSDN通过智能技术生成

1、写在前面

Layui文件上传逻辑：异步上传（点击按钮就将文件上传到服务器，然后再返回线上图片地址，等提交表单提交时，将其它表单信息和图片的线上地址一起提交）
先给我自己的代码

2、Layui前端代码说明

<form class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">标签</label>
        <div class="layui-input-block">
            <button type="button" class="layui-btn" id="firstID">
                <i class="layui-icon">&#xe67c;</i>上传按钮
            </button>
            <input type="hidden" name="url" id="secondID">
        </div>
    </div>
</form>

上面这段代码声明了一个layui表单，里面有一个按钮和一个隐藏的input。

<script>
    layui.use(['upload','form'], function(){
        var upload = layui.upload;
        var form = layui.form;
        upload.render({
            elem: '#firstID', 			//选中你要绑定的上传组件
            url: '/datatest/upload',//上传接口
            accept:'file',					//文件类型，不写默认是images，file表示全类型
            done: function(res){		//上传完回调，这里的res必须是json类型
                if (res.status === 200) {
                    layer.msg(res.msg, {icon: 1});
                    $('#secondID').val(res.path);  //回填路径值
                }else{
                    layer.msg('上传失败', {icon: 2});
                }
            },
            error: function(){
                layer.msg('error'+ res.status, {icon: 2});
            }
        });
    });
</script>

注意，官网文档里特别说明了接口返回信息必须是严格的JSON格式，详见官方文档https://www.layui.com/doc/modules/upload.html

3、thinkPHP6.0后端代码

tp6的官方代码对于上传这部分的描写着实是坑。先给我自己的代码：

class DataTest{
  public function upload(){
    $file = request()->file('file');  //这里‘file’是你提交时的name
    try{
        validate(['goodFile' => [     //goodFile是你自定义的键名，目的是为了对check里数组中的
            'fileSize' =>50*1024*1024,//goodFile字段值进行验证;允许文件大小
            'fileExt'  => array('mp3','wav'),  //允许的文件后缀
            ]])->check(['goodFile'=>$file]);//也就是对上传的$file进行验证
        $saveName = \think\facade\Filesystem::disk('public')->putFile( 'music', $file);//保存文件名
        $arr = ['status' => 200, 'msg' => '成功', 'path' => app()->getRootPath().'public/storage'.$saveName];
        return json($arr);   				//返回标准json格式
    }catch (\Exception $e) {
        return $this->exceptionHandle($e,'上传失败!' . $e->getMessage(),'json','');
    }
	}
}

首先，对于 file函数

$files = request()->file('file');

File()这个函数本身并没有‘file’参数，这里的‘file只是’你提交时input的name。不过layui时绑定组件提交，并没有显式地给出name（这里就是个大坑），尝试多次后才确定‘file‘可行。

如果你把前端代码改成

 <input type="file" name="yourName" vlaue="请上传文件">

那么你后端代码就要改成这样，亲测有效

$files = request()->file('yourName');

其次，对于check函数验证

validate()->check()

Check()里面只能是一个数组，也就是我上面写的[‘goodFile’=>$file]。而官方文档里确直接把$file给填进去了，这是为什么呢？让我们看一下官方文档的代码

//官方文档代码
public function upload(){
    // 获取表单上传文件
    $files = request()->file(); //注意这里
    try {
        validate(['image'=>'filesize:10240|fileExt:jpg|image:200,200,jpg'])
            ->check($files);  //注意这里
        $savename = [];
        foreach($files as $file) {
            $savename[] = \think\facade\Filesystem::putFile( 'topic', $file);
        }
    } catch (\think\exception\ValidateException $e) {
        echo $e->getMessage();
    }
}

可以看到作者写的file函数里面是不带参数的，这样得到的$files就是是一个数组，而validate里面就是验证$files里字段‘image’的值。而且从后面的foreach来看，这里是多文件上传。作者实在太懒。

最后，对于保存路径值

$saveName = \think\facade\Filesystem::disk('public')->putFile( 'music', $file);//保存文件名
$arr = ['status' => 200, 'msg' => '成功', 'path' => app()->getRootPath().'public/storage/'.$saveName];

这里默认会在public/storage/music/目录下保存文件。

如果你需要保存到别处，这里你需要修改：项目根目录->config.php->filesystem.php

<?php

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