图片上传组件

概述

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

单图上传组件

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

• 组件：{:widget('upload/image',array('avatar|头像|90x90|建议上传尺寸450x450',isset($info['avatar_url']) ? $info['avatar_url'] : ''))}

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

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

• 组件使用

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

<form class="layui-form model-form" action="" style="width:80%;">
    <div class="layui-form-item">
        <label class="layui-form-label">头像：</label>
        {:widget('upload/image',array('avatar|头像|90x90|建议上传尺寸450x450',isset($info['avatar_url']) ? $info['avatar_url'] : ''))}
    </div>
</form>

• 效果展示：

  

多图上传组件

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

• 组件：{:widget('upload/album',array('imgs|图集|90x90|20|建议上传尺寸450x450',isset($info['imgs_list']) ? $info['imgs_list'] : []))}

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

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

• 组件使用

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

<form class="layui-form model-form" action="" style="width:80%;">
    <div class="layui-form-item">
		<label class="layui-form-label">商品相册：</label>
		{:widget('upload/album',array('imgs|图集|90x90|20|建议上传尺寸450x450',isset($info['imgs_list']) ? $info['imgs_list'] : []))}
	</div>
</form>

• 效果展示：

  

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