请选择 进入手机版 | 继续访问电脑版
福玉久久 门户 查看主题

attachmentSimple 组件获取图片url地址,用于img标签显示上传的图片

发布者: 风影 | 发布时间: 2019-1-5 01:53| 查看数: 651| 评论数: 3|帖子模式

欢迎加入

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
原因:attachmentSimple 组件可以上传图片,但是没有图片预览的能力!如果想把上传的图片,使用img标签显示出来!就需要自己写代码实现!
解决办法:
主要代码
  1. // 转换动态图片URL
  2.         Model.prototype.getImageUrl = function(value, ownerID) {
  3.                 if (value) {
  4.                         try {
  5.                                 var jsonList = eval("(" + value+ ")");
  6.                                 if (jsonList instanceof Array) {
  7.                                         var realFileName = jsonList[0]["realFileName"];
  8.                                         var storeFileName = jsonList[0]["storeFileName"];
  9.                                         var operateType = "browse";
  10.                                         var url = '/baas/justep/attachment/simpleFileStore?realFileName=' + realFileName + '&storeFileName=' + storeFileName + '&ownerID=' + ownerID + '&operateType=' + operateType;
  11.                                         return require.toUrl(url);
  12.                                 }
  13.                         } catch (e) {
  14.                                 console.log(e);
  15.                         }
  16.                 }
  17.                 return "";
  18.         };
复制代码
其中参数value是attachmentSimple 组件绑定的data组件字段的值,
ownerID是data组件当前行的ID列的值,
jsonList是一个数组!表示保存了几个文件!通过这个方法就可以获取到这个图片的url地址了!

image(html)组件绑定数据



bind-attr-src: $model.getImageUrl( val("img"), val("ID"))


img :上传文件路径
ID :行ID




最新评论

风影 发表于 2019-1-5 02:03:49
attachmentSimple 组件多张图片同时上传,类型指定,限制大小,长度
  1. var data = this.comp("mainData");//attachmentSimple所绑定的data组件对象
  2. var uploader = this.comp("attachmentSimple1").uploader;
  3. $(uploader.inputElement).attr('multiple', 'multiple');//设置uploader中的multiple属性值,可以上传多张图片
  4. //判断只要特定的文件类型可以上传
  5. uploader.on('onFileSelected',function(event){

  6. var fileType = event.file.type;

  7. //自己判断fileType,如果不符合条件用cancel为true终止选择文件
  8. if(fileType != "image/jpeg" && fileType != "image/png" && fileType != "image/gif"){
  9. event.cancel = true;
  10. justep.Util.hint("请上传图片!");
  11. }
  12. //限制大小
  13. if (event.file.size > 1024000) {
  14.     justep.Util.hint("上传的文件大小不能超过100KB");
  15.     event.cancel = true;
  16.     return;
  17. }
  18. //限制长度fFile 为attachmentSimple绑定的字段
  19. //一次性上传多个文件
  20. if( event.files.length >= 2){
  21. alert("只能上传2个文件");
  22. event.cancel = true;
  23. return;
  24. }

  25. //分多次上传的单个文件
  26. var fAttachment = data.getValue("fAttachment");
  27. if(fAttachment){
  28. if ($.parseJSON(fAttachment).length >= 2 ) {
  29. alert("只能上传2个文件");
  30. event.cancel = true;
  31. }
  32. }
复制代码

注意 :img 的 onload事件是异步执行的!如果你想限制图片的大小和宽高,就需要设置attachmentSimple默认不自动上传:http://docs.wex5.com/wex5-ui-question-list-2105
在 onload 事件中调用self.comp('attachmentSimple1').uploader.submit();  进行上传
  1. Model.prototype.model1Load = function(event) {
  2.     var data = this.comp("data1");
  3.     var uploader = this.comp("attachmentSimple1").uploader;
  4.     $(uploader.inputElement).attr('multiple', 'multiple');
  5.     var _URL = window.URL || window.webkitURL;
  6.     uploader.on('onFileSelected', function(event) {
  7.         var file = event.file, img;
  8.         if (file) {
  9.             img = new Image();
  10.             img.onload = function () {
  11.                 alert(this.width);
  12.                 alert(this.height);
  13.                 alert(file.size);
  14.             };
  15.             img.src = _URL.createObjectURL(file);
  16.         }
  17.     });
  18. };
复制代码


风影 发表于 2019-1-5 02:05:40
attachmentSimple组件显示一行数据的多张图片

http://docs.wex5.com/wex5-ui-question-list-2093/
风影 发表于 2019-1-5 02:06:43
attachment(非attachmentSimple)相关的附件组件如何实现物理删除

http://docs.wex5.com/bex5-ui-question-list-10311/
快速回复 返回顶部 返回列表