手册版本 V3.0

组件名称

graceSelectImgAndUpload : /graceUI/组件目录/graceSelectImgAndUpload

功能描述

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

组件属性

uniCloud 使用说明

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

组件方法

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

后端接口返回值格式要求

成功:
{status : 'ok', data : '上传后图片地址', [2020-03-23 新增] 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']);
    }
}

演示代码