layui 拖拽上传 + PHP简单文件上传 --学习之路

前端

 一定要引入好layui.js

<script type="text/javascript" src="/static/admin/lib/layui/layui.js" charset="utf-8"></script>

            <!--拖拽文件上传div-->
            <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>
            <!--隐藏域 存储返回的文件路径-->
            <input type="hidden" id="img" value="" name="img">

 <script>
layui.use(['upload', 'element', 'form', 'layer', 'jquery', 'laydate'], function () {
 var $ = layui.jquery,
            form = layui.form,
            upload = layui.upload,
            element = layui.element,
            layer = layui.layer,
            laydate = layui.laydate;
//拖拽上传
        upload.render({
            elem: '#upload',
            url: '/upload' //改成您自己的上传接口
            ,accept:'images'
            ,done: function (res) {
                let img = res.data;
                //将返回的信息设置到隐藏域
                $('#img').val(img)
                layer.msg('上传成功');
            }
            ,error: function(res){
                //请求异常回调
                console.log(res)
            }
        });
});
</script>

 PHP

TP5 的文件上传方法   

        返回的一定要是json类型

public function upload()
    {
        $file = request()->file('file');
        // 移动到框架应用根目录/public/uploads/ 目录下 没有则创建
        $info = $file->move(ROOT_PATH.'public'.DS.'uploads');
        //拼接图片目录
        $img = '/uploads/'.$info->getSaveName();
        return json(['code'=>0,'msg'=>'成果','data'=>$img]);
    }

 前端点击上传文件后会返回图片的路径

此时再提交表单时  这个路径会存储到隐藏域内  一起上传到后台 

后台腾讯云存储配置

//云存储
    public function oss($path, $img)
    {
        $secretId = "AKID0lGXUAyibFbjblldgS0HIzA6l9Gy8dYD "; //"云 API 密钥 SecretId";
        $secretKey = "Zsu4xc08zKGvJF1ViLhpfFZYGlCRQ7Yi"; //"云 API 密钥 SecretKey";
        $region = "ap-shanghai"; //设置一个默认的存储桶地域
        $cosClient = new Client(
            array(
                'region' => $region,
                'schema' => 'https', //协议头部，默认为http
                'credentials' => array(
                    'secretId' => $secretId,
                    'secretKey' => $secretKey)));
        try {
            $bucket = "fengziheng-1304516760"; //存储桶名称 格式：BucketName-APPID
            $key = $img; //此处的 key 为对象键，对象键是对象在存储桶中的唯一标识
            $srcPath = 'I:/phpstudy_pro/WWW/month11/kanjia/kanjia/public' . $path;//本地文件绝对路径
            $file = fopen($srcPath, "rb");
            if ($file) {
                $result = $cosClient->putObject(array(
                    'Bucket' => $bucket,
                    'Key' => $key,
                    'Body' => $file));
                return $result['Location'];
            }
        } catch (\Exception $e) {
            echo "$e\n";
        }
    }

数据保存入库 

public function save(Request $request)
    {
        $data = $request->post()['info'];
        $arr = explode(' - ', $data['date']);//空格 - 空格
        //如果没输入图片就上传 返回失败
        if ($data['img'] == null) return json(['code'=>400,'msg'=>'失败','data'=>'']);

        //格式化时间戳
        $data['start_time'] = strtotime($arr[0]);
        $data['end_time'] = strtotime($arr[1]);

        $path = $data['img'];
        $img = rand(1, 99) . '.png';//设置 图片唯一标识

        //获取存储桶连接
        $data['img'] = $this->oss($path, $img);
        unset($data['file']);
        unset($data['date']);
        //数据表创建数据
        $res=ModelsBargain::create($data);
        if ($res == false) return json(['code'=>400,'msg'=>'失败','data'=>'']);
        return json(['code'=>200,'msg'=>'成果','data'=>'']);
    }