# 图片上传组件

# 概述

项目开发中我们经常会使用到上传图片、上传文件的功能,上传文件功能由:表单元素CSS样式JS交互表单提交等一系列操作和元素组成,如果都放入表单元素中显得代码复杂和代码冗余,同时维护成本也比较高,只有一个文件上传勉强可以接收,如果一个表单中有N个上传文件的功能,单单一个上传文件的功能估计都写的够呛,更别说其他的表单元素处理了,从代码的简洁性、可维护性角度出发,我们自定义开发了一套上传文件的组件,本着开箱即用的原则,要求组件具备:可插拔式灵活性可维护性高效性等等,在需要实现文件上传的地方只需要简单的引入组件即可,无法再写那么多冗余而又费时费力的代码,根据项目的实际要求和经验,我们开发了一套灵活多年的系统框架组件:上传图片组件上传图片并裁剪组件上传文件组件(不包括图片),下面我们做详细的说明;

# 单图上传组件

顾名思义,单图上传组件即只能上传一个图片的组件,比如头像上传封面上传等等,这个应该是大多数场景都会遇到的问题,针对此种场景我们单独开发了一套单图上传组件。

  • 组件:{upload:image name="avatar|头像|90x90|建议上传尺寸450x450" value="isset($info['avatar_url']) ? $info['avatar_url'] : ''"}

  • 参数:name:avatar|头像|90x90|建议上传尺寸450x450

`avatar`:组件名称,此字段对应数据表中的字段名称`avatar`;
`头像`:这个文字是动态指定上传按钮的名称,组件会自动解析为`上传头像`;
`90x90`:这个是图片组件图片显示区域的大小,代表`长度90px`,`宽度90px`;
`建议上传尺寸450x450`:这个时上传图片时给用户的提示语,要求或建议需要上传什么样尺寸的图片;
1
2
3
4
  • 组件使用

那么组件如何便捷的在表单中使用呢?下面给大家演示一下使用方法,简单易懂:

<form class="layui-form model-form" action="" style="width:80%;">
    <div class="layui-form-item">
        <label class="layui-form-label">头像:</label>
        {upload:image name="avatar|头像|90x90|建议上传尺寸450x450" value="isset($info['avatar_url']) ? $info['avatar_url'] : ''"}
    </div>
</form>
1
2
3
4
5
6
  • 效果展示:

    mixureSecure

# 多图上传组件

多图组件区别于单图组件,多图组件是以图片集的形式存在的,解决了部分功能需要上传多张图片的场景,比如商品图片展示,这时商品肯定不止单单一个图片,而是一个图集集。

  • 组件:{upload:album name="imgs|图集|90x90|20|建议上传尺寸450x450" value="$info['imgsList']"}

  • 参数:name:imgs|图集|90x90|20|建议上传尺寸450x450

`imgs`:组件名称,此字段对应数据表中的字段名称`image`;
`图集`:这个文字是动态指定上传按钮的名称,组件会自动解析为`上传相册`;
`90x90`:这个是图片组件图片显示区域的大小,代表`长度90px`,`宽度90px`;
`20`:最大上传图片张数,超限后上传时系统会弹出提示
`建议上传尺寸450x450`:上传图片尺寸提示语;
1
2
3
4
5
  • 组件使用

多图组件的使用也非常简单,与单图组件的引入无异,直接一行代码引入即可,其他复杂的逻辑和业务处理全部交给组件自身去解决。

<form class="layui-form model-form" action="" style="width:80%;">
    <div class="layui-form-item">
		<label class="layui-form-label">商品相册:</label>
		{upload:album name="imgs|图集|90x90|20|建议上传尺寸450x450" value="$info['imgsList']"}
	</div>
</form>
1
2
3
4
5
6
  • 效果展示:

    mixureSecure

至此图片上传组件应该讲的比较清楚了,下一章节我们将详细阐述《文件上传组件》的基本使用和原理。