TP5+LayUI开发实战图片上传及预览

任何一个项目或产品，无论前端还是管理后台，图片上传这个功能几乎从不会缺席，如头像上传、商品图片、相册照片等等，我们觉得他简单，又觉得他复杂，其实我们需要弄清楚几个关键点就可以了。

• 上传方式？form表单或者base64。
• 图片大小和格式类型限制？
• 如何更好的存储。
• 是否生成缩略图。
• 冗余垃圾图片处理，以节省服务器存储空间。

今天就以一个简单的单图上传及预览为例，来演示基本代码构建。

废话不多说，直接上代码。

前端代码：

<!--HTML部分-->
<div class="layui-form-item">
    <label class="layui-form-label">身份证照片</label>
    <div class="layui-input-inline" style="width: 40%">
        <div class="layui-upload-drag" id="idcardEndUploader">
            <div>
                <i class="layui-icon layui-icon-upload"></i>
                <p class="cus-font-smaller">点击上传
                <span class="layui-badge-rim layui-border-orange">人像面</span>，或将文件拖拽到此处</p>
            </div>
            <div class="cus-image-preview {empty name='info.idcard_end'}layui-hide{/empty}">
            <hr>
            <img src="{$info.idcard_end_th|default=''}" data-src="{$info.idcard_end|default=''}" alt="上传成功后渲染" style="max-width: 196px" title="点击查看大图">
            <div class="layui-word-aux">（点击图片查看原图）</div>
        </div>
    </div>
    <input type="hidden" name="idcard_end" value="{$info.idcard_end|default=''}"/>
</div>
<!--JS部分-->
layui.use(['form', 'layer', 'upload', 'form'], function () {
    var layer = layui.layer
        , $ = layui.$
        , upload = layui.upload
        , form = layui.form;

    ....

    //上传身份证背面照
    var idcardend_uploader = $('#idcardEndUploader');
    upload.render({
        elem: '#idcardEndUploader'
        , url: image_upload_url
        , method: 'post'
        , data: {res_type: 'teacher'}
        , accept: 'images'
        , exts: 'jpg|png|gif|bmp|jpeg'
        , size: 2048 //单位KB，2M
        , field: 'image'
        , done: function (res) {
            if (res.code * 1 === 0) {
                var opreview = idcardend_uploader.find('.cus-image-preview').first();
                opreview.find('img').attr({'src': res.data.src_th, 'data-src': res.data.src});
                opreview.hasClass('layui-hide') && opreview.removeClass('layui-hide');
                idcardend_uploader.siblings(':hidden[name="idcard_end"]').first().val(res.data.src);

                opreview.on('click', 'img', function (e) {
                    picture_viewer($, $(this).attr('data-src'));
                    e.stopPropagation();
                })
            } else {
                qx_toast(res.msg, 'error');
            }
        }
    });

    ....

});

后端代码：

/**
 * 图片上传
 * @param Request $request
 * @return \think\response\Json
 */
public function imageUpload(Request $request)
{
    $returns = ['code' => 0, 'msg' => '上传成功！', 'data' => []];
    try {
        $file = $request->file('image');
        if (empty($file))
            \exception('上传数据为空！请刷新页面后重试！');
        $validateOptions = [
            'size' => 2048 * 1024, // 默认限制2MB
            'ext' => 'jpg,png,gif,bmp,jpeg'
        ];

        //构建文件保存路径
        $savePathBase = Env::get('root_path') . 'public';
        $saveDir = '/uploads/';
        $resType = $request->param('res_type/s', '');
        if (!empty($resType))
            $saveDir .= $resType . '/';
        $result = $file->validate($validateOptions)->move($savePathBase . $saveDir);
        if (!$result)
            \exception($file->getError());

        $savePath = $saveDir . str_replace('\\', '/', $result->getSaveName());

        //生成缩略图
        $thumbSaveName = build_thumb_path($savePath);
        $imageObj = Image::open($savePathBase . $savePath);
        $imageObj->thumb(200, 128, Image::THUMB_SCALING)->save($savePathBase . $thumbSaveName);
        $returns['data'] = [
            'src' => $savePath,
            'src_th' => $thumbSaveName
        ];

    } catch (\Exception $e) {
        $returns['code'] = 999;
        $returns['msg'] = '上传失败' . $e->getMessage();
    }

    return json($returns);
}