attachmentSimple組件、cropper插件圖片上傳與顯示

attachmentSimple組件（多圖上傳）

官方案例路徑：UI2->system->components->justep->attachment

添加圖片

組件：attachmentSimple；data(id 字符串；image 字符串)

流程：

[1]添加組件attachmentSimple，並設置屬性值：bind-ref:$model.data.ref("image")；actionUrl:/baas/justep/attachment/simpleFileStore

[2]在js中獲取data組件中保存的圖片數據，將數據存儲到數據庫中

Tip:

a:上傳圖片自動保存到data組件的image中，保存值為：[{"storeFileName":"C795058790800001E2D453C01600113C","realFileName":"monster.jpg"}](顯示時需要先轉化為圖片路徑)；

b:組件樣式可以修改

.x-item-other{
  background-size:80px;        
}
.x-item-upload{
  background-size:80px;
}
.x-attachment-item{
  width:80px;
  height:80px;    
}
.x-item-remove{
  background-size:80px;  
}

顯示圖片

流程：

list中image屬性bind-attr-src設置：$model.getImageUrl(rowdata)

定義getImageUrl函數：

var Model = function(){
　　　　this.callParent();
　　　　//$UI/system/service/doc/common/simpleFileStore.j
　　　　this.actionUrl = "/baas/justep/attachment/simpleFileStore";
};
Model.prototype.getImageUrl=function(row){
 　　if(row!==undefined){
 　　　　var jsonList=eval("("+row.val('photo')+")");
 　　　　var ownerID=row.getID();
 　　　　if(jsonList!==undefined){
 　　　　　　var realFileName=jsonList[0]['realFileName'];
 　　　　　　var storeFileName=jsonList[0]['storeFileName'];
 　　　　　　var operateType="browse";
 　　　　　　var url=this.actionUrl+'?realFileName='+realFileName
 　　　　　　　　　　+'&storeFileName='+storeFileName
 　　　　　　　　　　+'&ownerID='+ownerID
 　　　　　　　　　　+'&operateType='+operateType;
 　　　　　　return require.toUrl(url);
 　　　　}
 　　}
 }

Tip：

a:eval():將JSON字符串解析成JSON數據格式

部署

[1]部署到服務器如果采用模式1或模式2，attachmentSimple組件actionUrl只能使用bassServer不能使用.j。.j是UIServer的特殊格式，需要模式3支持。

正常請求會是：

http://ip:port/x5/UI2/system/service/doc/common/simpleFileStore.j (x5為UIServer的應用名，確認服務端部署)

[2]圖片上傳服務文件包括：attachment.service.m，SimpleFileStore.php

[3]可根據實際需要在SimpleFileStore.php文件service方法中修改圖片保存路徑

修改要點：
namespace justep;
self::$docStorePath = str_replace("baas","",APP_ROOT)."uploads".self::$osSeparator."attachmentSimple";

cropper插件上傳（裁切上傳）

官方案例路徑：UI2->demo->picCut

圖片上傳可以直接引用官方案例中mainActivity.w，根據實際情況調整細節

文件上傳服務文件：lawrance.service.m，Lawrance.php

可根據實際需要在Lawrance.php文件uploadImageAjax方法中修改圖片保存路徑

Tip：

文件查找按鈕在開發過程中，如果瀏覽器手機模式，查找文件會失效，但部署后可用不影響。