上传组件

上传说明

• 我们操作的所有上传都会存放到 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>

多样上传

提示

• 以下方式可以支持“临时上传” 或 “图库选择”
  
• 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>

参数说明

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