attachmentSimple组件、cropper插件图片上传与显示-CSDN博客

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：

文件查找按钮在开发过程中，如果浏览器手机模式，查找文件会失效，但部署后可用不影响。

转载于:https://www.cnblogs.com/skye-blog/p/8492046.html