TP6+layui 文件上传

一、引入layui

html

<div class="layui-upload-drag" id="upload">
    <i class="layui-icon"></i>
    <p>点击上传，或将文件拖拽到此处</p>
    <div class="layui-hide" id="uploadDemoView">
        <hr>
        <img src="" alt="上传成功后渲染" style="max-width: 196px">
    </div>
</div>

script

<script>
layui.use(['jquery','upload'],

function () {
        $ = layui.jquery;
            var upload = layui.upload;
    
        //拖拽上传
        upload.render({
            elem: '#upload'
            , url: '/admin/news/upload' //改成您自己的上传接口
            , done: function (res) {
                console.log(res.imgPath)
                layer.msg('上传成功');
                layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.imgPath);
            }
        });
  });

二、php

路由

Route::post('/news/upload','news/upload');

 public function upload()
    {
        // 获取表单上传文件 例如上传了001.jpg
        $file = request()->file('file');
        // 上传到本地服务器
        $savename = Filesystem::disk('public')->putFile( 'upload', $file);
        //转换反斜杠
        $savename=str_replace('\\','/',$savename);
        //$savename  =》upload/20210725/28b20fe2b1913c94df7f84a239156fd7.png
        //拼接服务器地址
        $imgPath = 'http://local.news.com/storage/'.$savename;
        return json(['code'=>200,'imgPath'=>$imgPath,'msg'=>'成功']);
        
    }