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

WeX5V3.6 AttachmentSimple组件修改

发布者: 风影 | 发布时间: 2019-1-5 23:01| 查看数: 297| 评论数: 0|帖子模式

欢迎加入

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

x
原AttachmentSimple组件,功能比较固定,支持单个、多个文件同时上传;上传方式,前端产生文件的UUID,提交到后端,后端根据前端的UUID保存文件;先上传文件,再下载显示;
修改:支持服务端生成唯一编码,保存文件;然后,前端根据唯一编码下载图片;

修改内容:
1 attachmentSimple.js
initUploader:function(){
var self = this;
var actionUrl = require.toUrl(this.actionUrl);
self.uploader = new Uploader(self.$domNode.find('.x-item-upload'),{
                actionUrl:actionUrl,
                compress: this.compress,
                accept:this.accept
            });
    self.uploader.retCode = ''; // TODO: 增加retCode字段 2017-02-09


getFileUrl : function(realFileName,storeFileName,ownerID,operateType){
        var url = new justep.URL(this.actionUrl);
        url.setParam('storeFileName',storeFileName);
        url.setParam('ownerID',ownerID);
        url.setParam('realFileName',realFileName);
        url.setParam('operateType',operateType);
        url.setParam('retCode', ((this.uploader.retCode) ? this.uploader.retCode: '')); // TODO: 增加retCode字段参数 2017-02-09
        return require.toUrl(url.toString());
},


addItem : function(realFileName,storeFileName,ownerID){
    var items = this.getItems();
    items.push({
    storeFileName :storeFileName,
    realFileName : realFileName,
    retCode: (this.uploader.retCode) ? this.uploader.retCode: '' // TODO: 增加retCode字段 2017-02-09
    });
    this.bindData.setValueByID(this.bindRelation,JSON.stringify(items),ownerID);
},


2 调用的地方,这段代码要具体看情况;可以参考!
// 自定义attachmentSimple1
Model.prototype.reInitAttachmentSimple = function(attachment) {
var self = this;
// 自定义图片显示路径
attachment.previewPicture = function($object){
        //console.log("attachment.previewPicture");
        var url = $object.retCode.get();
        if(url){
        return "url('"+url+"')";
        }
        };
        // 自定义图片下载路径
attachment.downloadFile = function(realFileName,storeFileName,ownerID){
        //console.log("attachment.downloadFile");
        var val = attachment.bindData.getValueByID('att', ownerID);
        var data = [];
        if(val) {
    try {
    data = JSON.parse(val);
    } catch(e) {
    if(console){
    console.log("绑定的数据解析失败[value:"+val+"]",e);
    }
    data =[];
    }
    $.each(data, function(index, obj) {
    if (obj.storeFileName == storeFileName) {
    var fileApi = require("$UI/system/components/justep/docCommon/fileApi");
        var url = obj.retCode;
        url && fileApi.browse(url);
        return false;
    }
    });
    }
        };
        // 增加删除文件事件
        attachment.removeItemByStoreID = function(storeFileName, ownerID){
    var items = attachment.getItems(ownerID);
    var delItem = null;
    if(items) {
    for(var i =0; i
    if(items.storeFileName == storeFileName){
    delItem = items.splice(i,1);
    break;
    }
    }
    }
    attachment.bindData.setValueByID(attachment.bindRelation, JSON.stringify(items), ownerID);
    // -- 判断是否达到图片上限 -- //
var attVal = attachment.bindData.getValue("att");
if (attVal && $.parseJSON(attVal).length < 5) {
  $('.x-item-upload.x-upload-hide').removeClass('x-upload-hide'); // 显示上传
}
   
    }
};


Model.prototype.modelLoad = function(event){
var data = this.comp("fileData");//attachmentSimple所绑定的data组件对象
var attachmentSimple1 = this.comp("attachmentSimple1");
var uploader = attachmentSimple1.uploader;
// 自定义attachmentSimple1
this.reInitAttachmentSimple(attachmentSimple1);
//设置uploader中的multiple属性值,可以上传多张图片
$(uploader.inputElement).attr('multiple', 'multiple');
// 设置服务端URL
var serverUrl = project.toServerUrl('app/upload-file/uploadPptp.jsonx');
this.comp("attachmentSimple1").actionUrl = serverUrl;
uploader.actionUrl = serverUrl;
//判断只要特定的文件类型可以上传
uploader.on('onFileSelected',function(event){
var fileType = event.file.type;
//自己判断fileType,如果不符合条件用cancel为true终止选择文件
if(fileType != "image/jpeg" && fileType != "image/png" && fileType != "image/gif"){
event.cancel = true;
project.;
}
//限制大小
$.each(event.files, function(i, file) {
if (file.size > 10485760) {// 10M
   project.;
   event.cancel = true;
   return;
}
});
//限制文件个数
var preNum = $.parseJSON(data.getValue("att")).length; // 默认给att赋值“[]”
var curNum = event.files.length;
if (preNum + curNum > 5) {
project.;
   event.cancel = true;
   return;
}
});
uploader.un('onSuccess');
uploader.on('onSuccess', function(event){
var statusCode = event.response.statusCode;
var message = event.response.message;
if (statusCode == '200') {
uploader.retCode = message;
// -- 执行原始组件的onSuccess回调方法 -- //
attachmentSimple1.$domNode.find('.x-doc-process-bar').hide().css('width','0%');
var _data = {
source: attachmentSimple1,
data:event.data,
fileName:event.data.fileName
};
attachmentSimple1.fireEvent('onSuccess',_data);
attachmentSimple1.changeState("upload");
attachmentSimple1.addItem(_data.data.fileName,_data.data.storeFileName,_data.data.ownerID);
// -- 判断是否达到图片上限 -- //
var attVal = data.getValue("att");
if (attVal && $.parseJSON(attVal).length >= 5) {
  $('.x-item-upload').addClass('x-upload-hide');//隐藏上传
}
} else {
project.;
// 重置进度条
attachmentSimple1.$domNode.find('.x-doc-process-bar').hide().css('width','0%');
}
});
};


3 缩略图图片样式
加样式:background-repeat: no-repeat;background-position: center center;

另外,WeX5源代码调试,可以对默认压缩版*.min.js先改名,然后重新编译UI资源;这样编译的UI资源是使用源码的,可以调试;找不到*.min.js就会直接使用组件的源码进行编译打包;

最新评论

快速回复 返回顶部 返回列表