客服端增加上传附件

static/css/common.css

@@ -422,4 +422,6 @@
     background: #fff;
 }
 .kefuFuncBox .el-textarea{width: 99%;}
+.kefuFolderBtn{vertical-align: middle;}
+.iconBtnsBox .kefuSendBtn{margin-right: 4px;float: right;}
 .clear{clear:both;}

static/css/gofly-front.css

@@ -147,6 +147,32 @@
 .launchPointer.offline{
     background: #ce3c39;
 }
+.folderBtn {
+    display: inline-block;
+    background-color: transparent;
+    overflow: hidden;
+    font-size: 1px;
+}
+.folderBtn:before {
+    content: '';
+    float: left;
+    background-color: #9da0a0;
+    width: 15px;
+    height: 3px;
+    margin-left: 2px;
+    border-top-left-radius: 2px;
+    border-top-right-radius: 2px;
+    box-shadow: 2px 2px 0 0 #9da0a0;
+}
+.folderBtn:after {
+    content: '';
+    float: left;
+    clear: left;
+    background-color: #d4d6d6;
+    width: 33px;
+    height: 22px;
+    border-radius: 1px;
+}
 @-webkit-keyframes bounce-up {
     25% {-webkit-transform: translateY(4px);}
     50%, 100% {-webkit-transform: translateY(0);}

static/html/chat_main.html

@@ -110,7 +110,8 @@
                                 </div>
                                 <div class="faceBtn"></div>
                                 <div class="imageBtn" id="uploadImg" v-on:click="uploadImg('/uploadimg')"></div>
-                                <el-button :disabled="sendDisabled" size="small" class="floatRight" type="primary" v-on:click="chatToUser">发送</el-button>
+                                <div class="folderBtn kefuFolderBtn" id="uploadFile" v-on:click="uploadFile('/uploadfile')"></div>
+                                <el-button class="kefuSendBtn" :disabled="sendDisabled" size="small" type="primary" v-on:click="chatToUser">发送</el-button>
                             </div>
                             <div class="clear"></div>
                             <el-input type="textarea" class="chatArea" v-model="messageContent"  v-on:keyup.enter.native="chatToUser"  placeholder="请输入内容"></el-input>

static/js/chat-main.js

@@ -200,6 +200,7 @@ var app=new Vue({
                         message: res.msg,
                         type: 'error'
                     });
+                    return;
                 }
                 _this.messageContent = "";
                _this.sendSound();
@@ -559,6 +560,42 @@ var app=new Vue({
                 });
             });
         },
+        //上传文件
+        uploadFile:function (url){
+            let _this=this;
+            $('#uploadFile').after('<input type="file"  id="uploadRealFile" name="file2" style="display:none" >');
+            $("#uploadRealFile").click();
+            $("#uploadRealFile").change(function (e) {
+                var formData = new FormData();
+                var file = $("#uploadRealFile")[0].files[0];
+                formData.append("realfile",file); //传给后台的file的key值是可以自己定义的
+                console.log(formData);
+                $.ajax({
+                    url: url || '',
+                    type: "post",
+                    data: formData,
+                    contentType: false,
+                    processData: false,
+                    dataType: 'JSON',
+                    mimeType: "multipart/form-data",
+                    success: function (res) {
+
+                        if(res.code!=200){
+                            _this.$message({
+                                message: res.msg,
+                                type: 'error'
+                            });
+                        }else{
+                            _this.messageContent+='file[/' + res.result.path + ']';
+                            _this.chatToUser();
+                        }
+                    },
+                    error: function (data) {
+                        console.log(data);
+                    }
+                });
+            });
+        },
         addIpblack(ip){
             let _this=this;
             $.ajax({

static/js/functions.js

@@ -81,11 +81,11 @@ function replaceContent (content,baseUrl) {// 转义聊天内容中的特殊字
         })
         .replace(/img\[([^\s\[\]]+?)\]/g, function (face) {  // 转义图片
             var src = face.replace(/^img\[/g, '').replace(/\]/g, '');;
-            return '<img onclick="bigPic(src,true)" src="' + src + '" style="max-width: 100%"/></div>';
+            return '<img onclick="bigPic(src,true)" src="' +baseUrl+ src + '" style="max-width: 100%"/></div>';
         })
         .replace(/file\[([^\s\[\]]+?)\]/g, function (face) {  // 转义图片
             var src = face.replace(/^file\[/g, '').replace(/\]/g, '');;
-            return '<div class="folderBtn" onclick="window.open(\''+src+'\')"  style="font-size:25px;"/></div>';
+            return '<div class="folderBtn" onclick="window.open(\''+baseUrl+src+'\')"  style="font-size:25px;"/></div>';
         })
         .replace(/\[([^\s\[\]]+?)\]+link\[([^\s\[\]]+?)\]/g, function (face) {  // 转义超链接
             var text = face.replace(/link\[.*?\]/g, '').replace(/\[|\]/g, '');