文档中心 > 淘宝达人

图片上传

更新时间:2015/09/18 访问次数:77209

图片上传demo:http://jaedemo.demo.jaeapp.com/function/imgupload

由于原来的图片组件分配的存储空间较小,且后续扩容比较麻烦,所以我们建议用户使用新的图片组件接口,原来的图片组件的接口依然可以用,但还是建议统一使用新接口,接口的产生的数据也统一迁移到新接口

图片上传服务

目前图片上传服务仅提供简单的图片上传功能,开发者在需要图片上传服务的页面加入input标签,浏览者选择图片后,图片将会被上传到开发者指定页面处理,开发者可以在图片上传页面中获得上传结果,以JSON的格式返回:

input标签

在需要图片上传的位置如以下格式加入input标签  

<input type="file" class="J_TCajaUploadImg" name="file" data-url="/upload.php" />

说明:

开发者无需将input标签包裹在form表单中,图片上传将创建单独的iframe以异步的方式上传。

input标签type属性值必须为"file"

input标签class属性值必须为"J_TCajaUploadImg"

input标签data-url属性值为处理图片上传的页面地址

input标签name属性必写,值无特殊要求。

图片上传接口

数据结构
<?php
resource ImgResponse {
        public short getStatus();
        public boolean isSuccess();
        public Img getResult();
        public String getErrorMsg();
        public void setStatus(short status);
        public void setSuccess(boolean success);
        public void setResult(Img result);
        public void setErrorMsg(String errorMsg);
    };
 
    resource Img {
        public Long userId;
        public Long id;
        public String name;
        public Long dirId;
        public Long size;
        public Integer type;
        public String url;
        public Integer status;
        public Integer safe;
        public Integer openStatus;
        public Date fileModified;
        public Integer deleted;
        public Date gmtCreate;
        public Date gmtModified;
        public String md5;
        public String shortUrl;
        public String fullUrl;
        public String checkSum;
    };    
 
    resource ImgDir {
        public Long id;
        public String name;
        public Long parentId;
    }
?>

$imgService->uzUpload($path [,$option])

参数:

$path string 必填 图片保存路径

$option ImgOptions 可选 图片处理选项

返回值:

以ImgResponse类型返回图片上传结果。
开发者选择图片后,图片会立即以异步的方式提交到上传页面,开发者需要在上传页面调用$imgService的uzUpload函数完成上传,函数会返回ImgResponse类型的上传结果。

说明:文件路径,由文件目录和文件名组成,路径必须是以'/'开头的绝对路径,若未定义文件名,将默认使用上传文件的文件名。若路径不存在,如果option中打开自动创建目录,则将按路径创建对应目录,否则返回错误。文件允许重名,但目录不可以

开发者在自己定义的上传页面(比如:upload.php)中调用$imgService->uzUpload("/test.jpg", NULL);开始上传。

调用ImgResponse对象的isSuccess()判定上传是否成功。

调用ImgResponse对象的getStatus()得到上传的状态码。

调用ImgResponse对象的getResult()得到Img类型的图片信息,包含图片的名字,ID,URL,大小等。

图片处理选项尚未开发。

$imgService->getUZImgById($imgId)

参数:

$imgId int 必填 指定图片id

返回值:

若存在Id为$imgId的图片,以Img类型返回该图片的信息;否则返回NULL。

$imgService->deleteUZImgById($imgId)

参数:

$imgId int 必填 指定图片id

返回值:

以ImgResponse类型返回删除图片结果。

$imgService->getUZImgList($dirId)

参数:

$dirId int 必填 指定目录id

返回值:

Img类型的数组。

根据目录Id获得该目录下所有图片信息。

$imgService->getUZImgDirList($dirId)

参数:

$dirId int 必填 指定目录id

返回值:

ImgDir类型的数组。

$imgService->createUZDir($dirName, $parentPath)

参数:

$dirName string 必填 需要生成的图片目录名称

$parentPath string 必填 目录所处路径

返回值:

ImgResponse类型对象

在parentPath路径下创建名为dirName的目录,parentPath必须是已存在的目录。

$imgService->getUZDir($dirPath)

参数:

$dirPath string 必填 目录路径

返回值:

ImgResponse类型对象

根据目录路径返回目录信息。

$imgService->getUZDirById($dirId)

参数:

$dirId int 必填 目录ID

返回值:

ImgResponse类型对象

根据目录编号返回目录信息。

前端页面获取上传结果

开发者可以在图片上传处理页面中输出自己需要的信息,这些信息会反馈到前端页面,前端页面可以按以下形式监听cajaupload获得反馈:

GS.addListener('cajaupload',function(data){});

其中data.content就是后台返回的信息。

说明:

如果是使用JSON形式返回,可以调用KISSY.JSON.parse(data.content);得到JSON对象。

新增接口

$imgService->uzTransformUrl($url,$path [,$option])

这个接口是用来将外部图片转换成内部图片的接口,其中url为外部图片的url,如:https://www.google.com.hk/logos/doodles/2013/raymond-loewys-120th-birthday-ca-fr-us-nl-uk-ie-6388231276855296-hp.jpg

其余参数说明与上传接口一致

2013-11-22新增接口

$imgService->getImgList($dirId, currentPage,pageSize)

$imgService->getUZImgList($dirId, currentPage,pageSize)

其中currentPage和pageSize必须大于0,pageSize小于等于50

返回的对象为

<?php
resource Page{
        private int currentPage = 1;//当前页初始值为第一页
    private int pageSize = 15;//初始页大小15
    private int totalCount ;//初始0
    /**
     * 是否有下一页
     * @return
     */
    public boolean hasNextPage(){
        int p = totalCount / pageSize;
        return currentPage < (totalCount % pageSize == 0 ? p : ++p) ? true : false;
    }
    
    /**
     * 是否有前一页
     * @return
     */
    public boolean hasPrePage(){
        return currentPage > 1;//第一页的时候没有前一页
    }
    
    /**
     * 拿到第一页的页号
     * @return
     */
    public int getFirstPageNumber(){//第一页是1
        return 1;
    }
 
    /**
     * 获取下一页页号
     * @return
     */
    public int getNextPageNumber(){
        return ++currentPage;
    }
    
    /**
     * 获取前一页的页号
     * @return
     */
    public int getPrePageNumber(){
        return currentPage > 1 ? currentPage - 1 : 1;//小于等于1的时候前一页页号直接返回1
    }
    
    /**
     * 获取最后一页页号
     * @return
     */
    public int getLastPageNumber(){
        int p = totalCount / pageSize;
        return  totalCount % pageSize == 0 ? p : ++p;
    }
    /**
     * 获取当前页的查询结果
     * <br>如果不存在结果,则返回empty的List
     * @return Img的列表
     */
    public List getResultList() {
        return resultList == null ? new ArrayList<T>() : resultList;
    }
 
    /**
     * 获取当前页页号
     * @return
     */
    public int getCurrentPage() {
        return currentPage;
    }
 
    /**
     * 获取每页大小
     * @return
     */
    public int getPageSize() {
        return pageSize;
    }
 
    /**
     * 获取总记录数
     * @return
     */
    public int getTotalCount() {
        return totalCount;
    }
 
    public void setResultList(List<Img> result) {
        this.resultList = result;
    }
 
    public void setCurrentPage(int currentPage) {
        this.currentPage = currentPage;
    }
 
    public void setPageSize(int pageSize) {
        this.pageSize = pageSize;
    }
 
    public void setTotalCount(int totalCount) {
        this.totalCount = totalCount;
    }
    
    };
 
   
?>

获取结果可以就可以获取到图片列表

$imgService->getUZImgList($dirId, currentPage,pageSize) ->getResultList()

获取图片总数

$imgService->getUZImgList($dirId, currentPage,pageSize)->getTotalCount()

图片处理辅助工具

使用返回的图片cdn地址,我们可以对图片进行处理,包括 按长边缩放、等比缩放、图片的缩放剪裁、图片的非缩放剪裁、图片的质量调整等,下面详细介绍一下这些方法的使用方式。
1. 使用步骤
使用 提供的图片上传服务上传图片到cdn,得到返回的图片地址,

比如http://img02.taobaocdn.com/imgextra/i2/436168931/T25A8GX4tXXXXXXXXX_!!436168931-0-jianzhan.jpg
通过对返回的图片地址进行url拼接,进行功能的配置,格式如:http://xxxx.jpg_宽x高.jpg,比如,http://img02.taobaocdn.com/imgextra/i2/436168931/T25A8GX4tXXXXXXXXX_!!436168931-0-jianzhan.jpg_310x310.jpg
特别注意的是:①缩放主要针对.jpg或.jpge图片,因此.gif图片也会被缩放成.jpg格式。 ②缩放尺寸并不是支持所有格式,支持的 大小格式,请参考 “图片尺寸规格表”
2.长边缩放
按照图片的高和宽中边长更长的一方进行缩放,比如宽为500高为200的图片,则按照宽进行缩放。在cdn返回的图片url后面添加 "_WIDTHxHEIGHT.jpg"
3.等比缩放(10000 表示尺寸不限制)
_620x10000 这种配置表示使用者希望图片的宽适应在一个620的空间中, 对于高是多少, 不限制. 只要缩放后的图跟原图等比就好.
_10000x220.jpg 也是类似, 使用者希望图片的高适应在一个220的空间中, 对于宽不做限制.
比如 http://img02.taobaocdn.com/imgextra/i2/436168931/T25A8GX4tXXXXXXXXX_!!436168931-0-jianzhan.jpg_310x310.jpg_620x10000.jpg
http://img02.taobaocdn.com/imgextra/i2/436168931/T25A8GX4tXXXXXXXXX_!!436168931-0-jianzhan.jpg_310x310.jpg_10000x220.jpg
4.图片的缩放剪裁
上述图片缩放, 总是不改变原图的长宽比, 不对原图做裁剪的. 比如一个300*400的图片, 缩成100*100的格式的时候, 会按照长边能放到100*100这个区域去进行缩放. 所以300*400的图片会被缩成 75*100. 如果想要按照短边适应缩放后的区域, 对长边多出来的部分裁剪, 则需要使用缩放裁剪(xz)功能.
比如: http://img02.taobaocdn.com/imgextra/i2/436168931/T25A8GX4tXXXXXXXXX_!!436168931-0-jianzhan.jpg_310x310.jpg_640x640xz.jpg
5.图片质量调整
除了可以对图片进行缩放外, 也可以降低图片质量, 从而减小网络流量, 加快图片的访问速度. 要调整图片质量只需要在原uri中增加图片质量调节参数(q或者Q)。
比如:调整图片质量为原来的90% http://img02.taobaocdn.com/imgextra/i2/436168931/T25A8GX4tXXXXXXXXX_!!436168931-0-jianzhan.jpg_q90.jpg
经过缩放的图片也可以进行质量调整, 如,http://img02.taobaocdn.com/imgextra/i2/436168931/T25A8GX4tXXXXXXXXX_!!436168931-0-jianzhan.jpg_310x310.jpg_640x640q90.jpg
说明:质量参数Q和q是有区别的.Q是绝对值, q是相对值. 比如一个原图的质量已经被调节成90%. 则增加Q90后缀, 图片不会发生变化, 增加q90, 则会被调节成 90% * 90% = 81%.

FAQ

关于此文档暂时还没有FAQ
返回
顶部