thinkphp5.1+layui图片上传（前端部分.第一种）

Posted 2021-05-14 遇见Time

前台展示(已开启自动上传，图片拖拽到框内或点击框后选择图片即可自动上传)

前端(亲测可用)

    <div class="layui-form-item">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <legend>消毒照片上传</legend>
        </fieldset>
        <div class="layui-row">
            <div class="layui-col-xs7">
                <div class="layui-upload-drag" id="test10" style="max-width: 60px;max-height:60px;margin-left:30px;">
                    <div class="layui-row">
                        <div class="layui-col-xs7">
                            <i class="layui-icon"></i>
                            <div style="font-size: 1px;width: 75px;margin-right:-10px;text-align: left;">点击上传，或将文件拖到这</div>
                        </div>
                        <div class="layui-col-xs5">
                            <div class="layui-hide" id="uploadDemoView" style="margin-left:80px;">
                                <hr>
                                <img src="" alt="上传成功后渲染" style="max-width: 60px;max-height:60px;">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-xs5">
                <label class="layui-form-label" style="width:60px;margin-left:-30px;display:none;" >图片名称</label>
                <div class="layui-input-inline" style="visibility:hidden;"><input type="text" id="picname" name="picname"  autocomplete="off" class="layui-input" ></div>
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-col-xs12">
                <div style="margin-left:30px;margin-top:7px;">
                    温馨提示:  一次上传一张图，且大小不超过2MB。
                </div>
            </div>
        </div>
    </div>

<script>
    layui.use(['form', 'upload'], function () {
        var upload = layui.upload;
        var $ = layui.jquery;
        var element = layui.element;
        var form = layui.form;
        //拖拽上传
        upload.render({
            elem: '#test10'   //绑定元素
            ,url: ""    //接口地址
            ,size: 2048            // 最大允许上传的文件大小  单位 KB
            ,done: function(res){  //返回状态值（不可少）
                if(.......){       //对返回的状态值code进行判断
                    layer.msg('上传成功');
                    var picname=res.filename;
                    $("#picname").val(picname);
                    layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', picname);
                    return layer.msg('上传成功');
                }else{
                    return layer.msg('上传失败');
                }
            }
        });
    })
</script>

(后端部分参照Thinkphp5.1系列另一篇)