阿里云

ThinkPHP+Layui图片异步上传

Thinkphp5.1版本的图片上传代码和以前版本没有什么变化,主要说下异步上传图片,使用layui框架上传单张图片之服务器,服务器返回图片地址给前台,然后前台渲染数据。


代码一:HTML代码

<div class="layui-form-item">
    <label class="layui-form-label">头像</label>
    <div class="layui-input-inline">
        <button type="button" class="layui-btn layui-btn-primary" id="uploadUserHead">
            <i class="layui-icon"></i>上传图片
        </button>
        <input type="hidden" name="userhead" id="userhead">
        <input class="layui-upload-file" type="file" accept="undefined" name="userhead">
    </div>
</div>


注意事项:

1、定义id='uploadUserHead' ,需要与 JS 代码内绑定元素一致

2、使用隐藏域,用来存储上传成功后的图片路径


代码二:JS代码

//注意进度条依赖 element 模块,否则无法进行正常渲染和功能性操作
layui.use(['element','upload'], function(){
    var element = layui.element;
    var upload = layui.upload;
    var uploadUserHead = upload.render({
        elem: '#uploadUserHead' //绑定元素
        ,url: '/admin/User/uploadUserHead' //上传接口
        ,size: 2048 //大可允许上传的大小,单位 KB
        ,field: 'userhead'
        ,done: function(res){
            //上传完毕回调
            if(res.code == 200){
                layer.msg(res.msg,{
                    icon:1,time:2000
                },function () {
                    $("#userhead").val(res.data);
                })
            }else{
                layer.msg(res.msg,{
                    icon:2,time:2000
                })
            }
        }
        ,error: function(){
            layer.msg('JS error, please check');
        }
    });


注意事项:

1、模式上传方式为post上传,可通过method,进行定义

2、图片类型默认为jpg|png|gif|bmp|jpeg ,正常可默认设置

3、文件域的字段名可通过field进行设置

4、最大文件上传大小通过size设置,默认为0,不限制大小,单位:kb


代码三:PHP代码

/**
 * 图片上传
 * @return \think\response\Json
 */
public function getuploadUserHead()
{
    // 获取表单上传文件
    $file = request()->file('userhead');
    // 移动到框架应用根目录/uploads/ 目录下
    $path = './uploads/';
    $info = $file->move($path);
    if($info) {
        // 成功上传后 获取上传信息
        return json(['code' => 200, 'msg' => '上传成功', 'data' => mb_substr($path, 1) .date('Ymd',time())."/". $info->getFilename()]);
    }
    else {
        // 上传失败获取错误信息
        return json(['code' => 100, 'msg' => $file->getError()]);
    }
}


注意事项:

1、需要写明接收文件字段名

2、上传路径需注意写清

3、返回成功信息时注意路径,个人写法规避 \ 无法解析问题

喜欢就点个赞吧

发表评论

需要先登录,才能发表评论哦!登录

网友评论
暂无评论