手册版本 V6.0

组件介绍

1、选择图片、预览图片、删除图片；

2、支持默认值设置；

4、完善的多图上传功能、带有上传进度 ；

5、上传失败重试功能；

6、上传成功返回图片数据并激活对应事件；

组件名称

gui-upload-images : /graceUI/组件目录/gui-upload-images

兼容平台

uniCloud 使用说明

01. 组件 <gui-upload-images ...... :save2uniCloud="true"></gui-upload-images>
02. 在 hx 内完成云服务空间配置工作，并选择阿里云

组件方法

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

后端api接口返回值格式

成功:
{status : 'ok', data : '上传后图片地址', result : "完整的上传服务器返回的数据"}
失败:
{status : 'error', 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']);
    }
}

重要说明

微信小程序端需要用户授权，教程 ：
https://www.lesscode.work/sections/0735aed114050bfc76953849840b05ca.html

演示代码