上传组件

上传说明

我们操作的所有上传都会存放到 public 入口目录下
一般情况下 图库选择 的模式就可以满足我们日常的附件管理需求
临时上传的案例在后台的文章管理中有应用场景, 请自行查看在考虑使用

目录	说明
public/locals	本地存放路径,此路径下内容不需要同步到OSS对象存储
public/storage	如果启用了云存储,请把此目录下内容迁移到云存储中
public/temporary	临时存储,请在入库是从此目录中移走,因为此目录随时会被清理

注意

请重点留意 HTML代码中有 class="builder ..." 的那行
图库选择: class="builder layui-auto"
临时上传: class="builder layui-auto-call"
PS: 这便是两种模式的由来, 有call 和无 call的区别

临时上传

提示

此处的“ builder layui-auto-call ”是触发关键
此处代表着点击后弹出文件选择框上传文件
PS: 这样上传的文件会上传到 public/temporary 临时目录

<!-- 新增案例 -->
<div class="layui-form-item">
    <label class="layui-form-label">封面：</label>
    <div class="layui-input-block">
        <div class="thumbnail" data-type="image" data-limit="1">
            <div class="musters"></div>
            <div class="builder layui-auto-call">
                <i class="layui-icon layui-icon-camera"></i>
                <p>上传封面</p>
            </div>
        </div>
    </div>
</div>

<!-- 编辑案例 -->
<div class="thumbnail" data-type="image" data-limit="1">
    <div class="musters">
        {if $detail.image}
        <div class="preview">
            <input type="hidden" name="image" value="{$detail.image}">
            <i class="layui-icon layui-icon-close"></i>
            <img src="{$detail.image}" alt="img">
        </div>
        {/if}
    </div>
    <div class="builder layui-auto-call {if $detail.image}layui-hide{/if}">
        <i class="layui-icon layui-icon-camera"></i>
        <p>上传封面</p>
    </div>
</div>

图库上传

提示

从图库从选择一张或多张图片或视频

<!-- 新增案例 -->
<div class="layui-form-item">
    <label class="layui-form-label">封面：</label>
    <div class="layui-input-block">
        <div class="thumbnail" data-type="image" data-limit="1">
            <div class="musters"></div>
            <div class="builder layui-auto">
                <i class="layui-icon layui-icon-camera"></i>
                <p>图库选择</p>
            </div>
        </div>
    </div>
</div>

<!-- 编辑案例 -->
<div class="thumbnail" data-type="image" data-limit="1">
    <div class="musters">
        {if $detail.image}
        <div class="preview">
            <input type="hidden" name="image" value="{$detail.image}">
            <i class="layui-icon layui-icon-close"></i>
            <img src="{$detail.image}" alt="img">
        </div>
        {/if}
    </div>
    <div class="builder layui-auto {if $detail.image}layui-hide{/if}">
        <i class="layui-icon layui-icon-camera"></i>
        <p>上传封面</p>
    </div>
</div>

多图案例

<!-- 
 新增案例 (多图) 
    1、设置上传类型(video,image,package,document): data-type="image" 
    1、字段类型设置为数组的: data-field="images[]" 
    2、控制最多能上传多少张: data-limit="2"
    3、最终PHP端接收的数据: {"images": ["https:xx.cn/aa.png", "https://xx.cn//bb.png"]}
-->
<div class="layui-form-item">
    <label class="layui-form-label">封面：</label>
    <div class="layui-input-block">
        <div class="thumbnail" data-type="image" data-field="images[]" data-limit="2">
            <div class="musters"></div>
            <div class="builder layui-auto">
                <i class="layui-icon layui-icon-camera"></i>
                <p>图库选择</p>
            </div>
        </div>
    </div>
</div>

<!-- 
  编辑案例 (多图)
    1、假设你的数据是这样的: $detail.images = ['https://xx.cn/aa.png', 'https://xx.cn/bb.png']
    2、通过循环进行图片的渲染
    3、通过count判断数组长度决定是否显示上传按钮
-->
<div class="layui-form-item">
    <label class="layui-form-label">封面：</label>
    <div class="layui-input-block">
        <div class="thumbnail" data-type="image" data-field="images[]" data-limit="2">
            <div class="musters">
                <!-- 这里循环渲染数组的图片路径 -->
                {foreach $detail.images as $url} 
                    <div class="preview">
                        <input type="hidden" name="images[]" value="{$url}">
                        <i class="layui-icon layui-icon-close"></i>
                        <img src="{$url}" alt="img">
                    </div>
                {/foreach}
            </div>
            <div class="builder layui-auto {if count($detail.images)>=2}layui-hide{/if}">
                <i class="layui-icon layui-icon-camera"></i>
                <p>上传封面</p>
            </div>
        </div>
    </div>
</div>

多样上传

提示

以下方式可以支持“临时上传” 或 “图库选择”
PS: 一般情况下建议只使用一种模式就好了

<!-- 新增案例 -->
<div class="layui-form-item">
    <label class="layui-form-label">封面：</label>
    <div class="layui-input-block">
        <div class="thumbnail" data-type="image" data-limit="1">
            <div class="musters"></div>
            <div class="builder">
                <i class="layui-icon layui-icon-camera"></i>
                <p>上传封面</p>
                <div class="mask">
                    <div class="item layui-auto">图库选择</div>
                    <div class="item layui-auto-call">本地上传</div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 编辑案例 (注意替换字段类型) -->
<div class="layui-form-item">
    <label for="image" class="layui-form-label">封面：</label>
    <div class="layui-input-block">
        <div class="thumbnail" data-type="image" data-limit="1">
            <div class="musters">
                {if $detail.image}
                <div class="preview">
                    <input type="hidden" id="image" name="image" value="{$detail.image}">
                    <i class="layui-icon layui-icon-close"></i>
                    <img src="{$detail.image}" alt="img">
                </div>
                {/if}
            </div>
            <div class="builder {if $detail.image}layui-hide{/if}">
                <i class="layui-icon layui-icon-camera"></i>
                <p>上传封面</p>
                <div class="mask">
                    <div class="item layui-auto">图库选择</div>
                    <div class="item layui-auto-call">本地上传</div>
                </div>
            </div>
        </div>
    </div>
</div>

图标显示

如果你上传的是一个文件或者是一个非图片的内容
您可以使用 to_ext_icon($url) 此参数进行图标显示
只要把你文件路径传入它会根据你的扩展名称返回对应的图标

// 以下是示例
<div class="preview">
    <img src="{:to_ext_icon($detail.image)}" alt="img">
</div>

上传大小

下面表格是系统默认的限制配置

文件类型	英文类型	默认最大可上传
图片	image	10MB
视频	video	30MB
文档	package	30MB
压缩包	document	30MB

可能有人会问题如何调整上传大小限制呢？
后端限制修改: server/config/project.php 下面的 uploader
前端JS限制(后台): server/public/static/backend/js/utils.min.js 找到方法 layThumbUpload()
前端JS限制(前台): server/public/static/frontend/js/utils.min.js 找到方法 layThumbUpload()
PS: 如果你设置的值比较大, 你可能还需要修改 Nginx 和 php.ini 的大小限制, 具体改那些问AI吧!

参数说明

名称	默认	说明
data-type	image	代表上传的类型: image/video/package/document
data-field	image	代表表单的字段名称
data-limit	1	限制上传的数量
data-water	true	是否开启图片水印