GraceUI 图片选择、预览、上传组件

功能描述

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

组件属性

maxFileNumber : {type : Number, default : 9} // 最大图片选择数
btnName : {type : String, default : "添加照片"}// 按钮文本
closeBtnColor : {type  : String, default : "#666666"}// 删除按钮文本颜色
uploadServerUrl : { type  : String, default : ""},// 上传服务器 api 地址
progressSize : { type:Number, default:1} // 进度条尺寸
progressColor :{type:String, default:'#27BD81' } // 进度条激活颜色
progressBGColor :{ type:String, default:'#F8F8F8' } // 进度条背景颜色

组件方法

1、upload 开始上传函数
2、setItems 设置默认值函数

后端接口返回值格式要求

成功:
{status : 'ok', data : '上传后图片地址'}
失败:
{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)){
				$this->json('http://grace.hcoder.net/api/'.$imageSavePath);
			}else{
				$this->json('上传失败', 'error');
			}
		}
	}
	
	public function getExeName($file){
		$pathinfo      = pathinfo($file);
        return strtolower($pathinfo['extension']);
	}
}

组件使用演示