账户中心 退出系统
使用手册 模板中心 账户中心
快速开始
常见问题
更新日志
下载框架
快速部署
组件调用手动调用
自动加载easycom
NVUE 说明
版权要求
设计规范初版
基础布局 ( 6 )
页面布局从这开始哦 (:
Flex布局组件形式
Flex布局样式形式
竖向切换动态切换
元素定位
手势识别
基础样式 ( 8 )
文本颜色
背景样式
阴影效果
圆角边框
文本样式
内置图标
图标扩展
样式动画
常用布局 ( 25 )
宫格布局九宫格
头部导航
底部导航
切换导航单行模式
切换导航多行模式
吸顶容器
动态吸顶
名片卡片
滚动区域
局部选项卡
全屏选项卡模式一原理演示
全屏选项卡模式二原理演示
全屏选项卡实战演示
分段切换
折叠面板
普通表格
数据表格
分类展示
横向公告
返回顶部
弹出菜单
功能菜单
时间轴
侧边抽屉
图标分类
常用列表 ( 9 )
通用列表
滑动列表新版组件模式
新闻列表
评论列表
图文列表
树状列表
拖拽排序竖向
可选列表单选 | 多选
全选列表多选 | 全选
常用组件 ( 25 )
徽章组件
圆角组件
标签组件
滚动公告
无缝滚动
按钮组件
进度按钮
搜索组件
星级评价
通用标题更多、换一批
倒计时
轮播组件新版本 更好用
轮播组件原生模式
区间滑块
进度圆环
城市选择
地区联动新版本 更灵活
步骤提示
链接组件
优惠券组件
为空展示
图片选择
多图上传
头像群组
数值动画
刷新与加载 ( 5 )
加载组件
全屏加载
下拉刷新原生模式
刷新组件滚动区域模拟模式
上拉加载原生模式
提醒弹框 ( 7 )
遮罩弹出层
顶部消息框
模态对话框
底部对话框
底部消息框
底部操作表
右下消息框
表单相关 ( 12 )
表单元素
表单验证
动态表单
分步提交
数值框
数字键盘
可选标签 单选 多选
可选标签 携带数据
可删标签
点选按钮
下拉选择
滑动解锁
日期时间 ( 6 )
日期及时间带有农历
日期区间日历形式
日期及时间pickr模式
时间段选择pickr模式
日程日历日历+日程
横向日期
文章相关 ( 4 )
文本编辑器
编辑器解析
富文本加强
展开全文
JS 函数库 ( 6 )
工具介绍
时间转换
网络请求
随机数值
md5 转换
使用 promise
系统信息
地图使用 ( 3 )
位置标注位置转换
周边信息周边搜索
拖拽定位中心坐标
常用界面 ( 21 )
搜索界面
登录注册
个人中心
头像裁剪
购物车
订单中心
条件筛选
商品详情
图片懒加载
骨架加载
抽奖活动
瀑布流
地址列表
添加地址
证件上传
滚动推荐
短信验证
排行榜
数据图表
商城套装
即时通讯
图片选择、预览、上传组件

功能描述

1、选择图片、预览图片
2、支持图片删除
3、支持默认值设置
4、完善的多图上传功能 [ 带有上传进度 ]
5、上传失败重试
6、上传成功返回图片数据并激活对应事件

组件属性

属性名称类型默认值作用
maxFileNumber数字9最大图片选择数
btnName字符串添加照片按钮文本
closeBtnColor字符串#666666删除按钮文本颜色
uploadServerUrl字符串
上传服务器 api 地址
progressSize数字1进度条尺寸
progressColor字符串#27BD81进度条激活颜色
progressBGColor字符串#F8F8F8进度条背景颜色
fileName字符串img上传时的文件名
formData对象{}上传时携带的表单数据
imgMode
字符串widthFix图片 mode 属性
header [ 2020-04-18 新增 ]
对象{}上传时携带的 header 数据

组件方法

1、upload 开始上传函数
2、setItems 设置默认值函数
3、clearAllImgs 清空图片
4、removeImg 删除某个图片 2020-06-04 新增

后端接口返回值格式要求

成功:
{status : 'ok', data : '上传后图片地址', [2020-03-23 新增] result : "完整的上传服务器返回的数据"}
失败:
{status : 'eror', data : '具体错误信息'}

调通建议

写一个最简单的单图上传功能,调试接口返回值,保证接口无误再使用组件;

php版后端代码示例

<?php
class uploadController extends grace{
    public function index(){
        $this->allowSize = 5;
        if(!empty($_FILES['img'])){
            //获取扩展名
            $exename  = $this->getExeName($_FILES['img']['name']);
            //检查扩展名
            if(!in_array($exename, array('png', 'gif', 'jpeg', 'jpg'))){$this->json('格式错误', 'error');}
            //检查文件大小
            if($_FILES['img']['size'] > $this->allowSize*1024*1024){$this->json('文件过大', 'error');}
            //本地上传
            $file = uniqid().'.'.$exename;
            $imageSavePath = 'uploadimgs/'.$file;
            if(move_uploaded_file($_FILES['img']['tmp_name'], $imageSavePath)){
                // 请严格按照下面的 json 的格式返回数据
                $arr = array('status'=>'ok', 'data' => 'http://您的域名/'.$imageSavePath, 'result' => '您的自定义内容');
                exit(json_encode($arr));
            }else{
                $arr = array('status'=>'error', 'data' => '具体的错误信息', 'result' => '您的自定义内容');
                exit(json_encode($arr));
            }
        }
    }
    public function getExeName($file){
        $pathinfo      = pathinfo($file);
        return strtolower($pathinfo['extension']);
    }
}

演示代码

UNI 普通版本
NVUE 版本
微信小程序独立版本
登录并购买 GraceUI 后可以查阅完整手册内容 。