# 图像上传 - [组件](#_1) - [上传头像](#_2) - [上传图片](#_3) - [原形函数](#_4) > 函数依赖请查看本章第一节 [概述](http://www.kancloud.cn/donknap/we7/175036)，使用前请务必 load()->func('tpl'); 加载模板组件函数 #### 组件 ##### 上传头像 此组件是支持裁剪头像 > tpl\_app\_form\_field\_avatar($name, $value = '') - $name 表单字段的名称，同一页面不能为空 - $value 用户的头像图片地址 ``` {php echo tpl_app_form_field_avatar('avatar', $profile['avatar']);} ``` ##### 上传图片 此组件是可同时上传多张，并支持预览 > tpl\_app\_form\_field\_image($name, $value = '') - $name 表单字段的名称，同一页面不能为空 - $value 用户的头像图片地址 ``` <div class="mui-input-cell"> {php echo tpl_app_form_field_image('image', $image);} </div> ``` #### 原形函数 您可以通过自己调用此函数，实现自定义的上传图片 > util.image(Element, CallBackFunction, Options); - Element Dom节点对象，或是JQ对象 - CallBackFunction 上传图片完成后，执行的回调函数，接收一个参数 result - Options 上传选项 - crop 是否需要裁剪，默认为 false - multiple 是否支持上传多张，默认为 false，开启crop时，此项只能为false - preview 是否支持图像预览，默认为false - aspectRatio 裁剪图片宽高比，默认为 1/1，格式最好为：w/h