Wex5的attachmentSimple组件的九图和单视频上传

Posted 2020-10-23 杜小二的博客(404code)

一、定义一个cData用来充当放置图片路径信息的临时容器

二、在attachmentSimple组件所在的文件的onLoadModel通过Js限制文件上传的类型和数量

Model.prototype.modelLoad = function(event) {
        var data = this.comp("data1");
        // 限制只能上传图片和视频在accept上可以设置
        var uploader = this.comp("attachmentSimple2").uploader;
        /*
         * //设置uploader中的multiple属性值,可以上传多张图片
         * $(uploader.inputElement).attr(\'multiple\', \'multiple\');
         */
        uploader.on(\'onFileSelected\', function(event) {
            var file = data.getValue("fileName");
            var jsonList = eval("(" + file + ")");
            // debugger
            if (event.file.type == "" || event.file.type.indexOf("image/") == 0) {
                type = event.file.type;
                if (jsonList != undefined && jsonList.length >= 8) {
                    if (jsonList.length == 8) {
                        util.hint("正在上传图片", {
                            "position" : "middle"
                        });
                        $(\'.x-item-upload\').addClass(\'x-upload-hide\');// 隐藏上传
                    } else {
                        $(\'.x-item-upload\').addClass(\'x-upload-hide\');// 隐藏上传
                        util.hint("仅单独上传1个视频或单独上传9张图片！", {
                            "type" : "warning",
                            "position" : "middle"
                        });
                        event.cancel = true;
                    }
                } else {
                    util.hint("正在上传图片", {
                        "position" : "middle"
                    });
                }
            } else if (event.file.type == "" || event.file.type.indexOf("video/") == 0) {
                type = event.file.type;
                if (jsonList != undefined && jsonList.length >= 1) {
                    util.hint("仅单独上传1个视频或单独上传9张图片！", {
                        "type" : "warning",
                        "position" : "middle"
                    });
                    event.cancel = true;
                } else {
                    util.hint("正在上传视频...", {
                        "position" : "middle"
                    });
                    $(\'.x-item-upload\').addClass(\'x-upload-hide\');// 隐藏上传
                    $(\'.x-item-remove\').addClass(\'x-upload-hide\');
                }
            }
        });
    };

三、单击组件减号时显示上传的加号按钮来控制是否能继续上传下载（在这里已经通过数量控制了，为了更加美观说着动态隐藏显示加号、减号按钮）

//单击减号事件
    Model.prototype.div33Click = function(event){
        $(\'.x-item-upload\').removeClass(\'x-upload-hide\');//取消隐藏上传
    };

四、保存图片的url到数据库，图片的物理文件在单击加号、减号的时候已经通过组件上传到服务器的默认路径了（可通过修改组件源代码修改）

//保存图片
    Model.prototype.saveImage = function(self) {
        var messageData = self.comp("messageData");
        var userData = self.comp("userData1");
        var data = self.comp("data1");
        var imageData = self.comp("imageData");
        
        var messageId = messageData.getCurrentRowID();
        var row = data.getCurrentRow();
        var jsonList = eval("(" + row.val(\'fileName\') + ")");
        if(jsonList !=undefined){
            // 1、使用 window.locaion.href 获得项目的根路径
            var curWwwPath = window.document.location.href;
            //2、获得主机地址之后 的目录
            var pathname= window.document.location.pathname;
            var pos = curWwwPath.indexOf(pathname);
            //3、获得主机地址
            var localhostPath = curWwwPath .substring(0,pos);
            
            for (i = 0; i < jsonList.length; i++) {

                jsonList[i].ownerID = row.getID();
                var ownerID = row.getID();
                var realFileName = jsonList[i]["realFileName"];
                var storeFileName = jsonList[i]["storeFileName"];
                var operateType = "preview";// 预览
                var previewUrl = self.comp("attachmentSimple2").getFileUrl(realFileName, storeFileName, ownerID, operateType);

                var Url = previewUrl;// 图片访问路径
                if(type.indexOf("image/") != -1){//上传为图片
                    if (Url != null) {
                        // 获取新增的消息id，存储到image表中
                        imageData.newData();
                        imageData.setValue("message_id", messageId);
                        imageData.setValue("image_url", Url);
                        //real_url = "http://120.27.11.218:8095"+imageUrl;
                        var real_url = localhostPath+Url;//拼接图片的地址栏预览路径
                        console.log("图片预览路径"+real_url);
                        imageData.setValueByID("real_url", real_url);    
                        
                        imageData.saveData();
                    }
                }else if(type.indexOf("video/") != -1){//上传为视频
                    messageData.setValue("video_url", Url);
                }
            }
        }
        // 刷新data防止下次上传的时候图片依然显示在界面
        //imageData.refreshData();
        data.refreshData();
    }