新增上传图片功能

config/config.go

@@ -16,6 +16,7 @@ const AccountConf = Dir + "account.json"
 const MysqlConf = Dir + "mysql.json"
 const MailConf = Dir + "mail.json"
 const LangConf=Dir+"language.json"
+const MainConf = Dir + "config.json"
 type Mysql struct{
 	Server string
 	Port string
@@ -27,14 +28,23 @@ type MailServer struct {
 	Server, Email, Password string
 }
 type Config struct {
-	Mysql *Mysql
+	Upload string
 }
 func CreateConfig()*Config{
-	mysql :=CreateMysql()
+	var configObj Config
 	c:=&Config{
-		Mysql: mysql,
+		Upload: "static/upload/",
 	}
+	isExist, _ := tools.IsFileExist(MainConf)
+	if !isExist {
 		return c
+	}
+	info, err := ioutil.ReadFile(MainConf)
+	if err != nil {
+		return c
+	}
+	err = json.Unmarshal(info, &configObj)
+	return &configObj
 }
 func CreateMailServer() *MailServer {
 	var imap MailServer

controller/message.go

@@ -2,9 +2,15 @@ package controller
 
 import (
 	"encoding/json"
+	"fmt"
 	"github.com/gin-gonic/gin"
 	"github.com/gorilla/websocket"
+	"github.com/taoshihan1991/imaptool/config"
 	"github.com/taoshihan1991/imaptool/models"
+	"github.com/taoshihan1991/imaptool/tools"
+	"os"
+	"path"
+	"strings"
 	"time"
 )
 // @Summary 发送消息接口
@@ -106,3 +112,39 @@ func SendMessage(c *gin.Context) {
 		"msg":  "ok",
 	})
 }
+func UploadImg(c *gin.Context){
+	config:=config.CreateConfig()
+	f, err := c.FormFile("imgfile")
+	if err != nil {
+		c.JSON(200, gin.H{
+			"code": 400,
+			"msg":  "上传失败!",
+		})
+		return
+	} else {
+
+		fileExt:=strings.ToLower(path.Ext(f.Filename))
+		if fileExt!=".png"&&fileExt!=".jpg"&&fileExt!=".gif"&&fileExt!=".jpeg"{
+			c.JSON(200, gin.H{
+				"code": 400,
+				"msg":  "上传失败!只允许png,jpg,gif,jpeg文件",
+			})
+			return
+		}
+		fileName:=tools.Md5(fmt.Sprintf("%s%s",f.Filename,time.Now().String()))
+		fildDir:=fmt.Sprintf("%s%d%s/",config.Upload,time.Now().Year(),time.Now().Month().String())
+		isExist,_:=tools.IsFileExist(fildDir)
+		if !isExist{
+			os.Mkdir(fildDir,os.ModePerm)
+		}
+		filepath:=fmt.Sprintf("%s%s%s",fildDir,fileName,fileExt)
+		c.SaveUploadedFile(f, filepath)
+		c.JSON(200, gin.H{
+			"code": 200,
+			"msg":  "上传成功!",
+			"result":gin.H{
+				"path":filepath,
+			},
+		})
+	}
+}

main.go

@@ -53,6 +53,7 @@ func main() {
 	engine := gin.Default()
 	engine.LoadHTMLGlob("static/html/*")
 	engine.Static("/static", "./static")
+
 	//首页
 	engine.GET("/", controller.Index)
 	engine.GET("/index", tmpl.PageIndex)
@@ -75,6 +76,8 @@ func main() {
 	engine.GET("/messages", controller.GetVisitorMessage)
 	//发送单条消息
 	engine.POST("/message",controller.SendMessage)
+	//上传文件
+	engine.POST("/uploadimg",controller.UploadImg)
 	//获取未读消息数
 	engine.GET("/message_status",controller.GetVisitorMessage)
 	//设置消息已读

static/css/common.css

@@ -4,13 +4,18 @@
 .faceBtn, .faceBtn:after, .faceBtn {
     border: 1px solid;
 }
+.iconBtns{
+    border-top:1px solid #e4e4e4;
+    border-bottom:1px solid #e4e4e4;
+    padding: 2px 0;
+}
 .visitorFaceBtn{
-    float: right;
+    float: left;
-    margin: 16px 4px 0 0;
+    margin-left: 5px;
 }
 .visitorFaceBox{
     position: absolute;
-    bottom: 70px;
+    bottom: 86px;
 }
 .kefuFaceBox{
     position: absolute;
@@ -69,6 +74,52 @@
     top: 10%;
     width: 15px;
 }
+.imageBtn {
+    width: 32px;
+    height: 23px;
+    overflow: hidden;
+    display: inline-block;
+    vertical-align: middle;
+    position: relative;
+    font-style: normal;
+    color: #9da0a0;
+    text-align: left;
+    text-indent: -9999px;
+    direction: ltr;
+    border: 1px solid;
+}
+.imageBtn:before {
+    content: '';
+    position: absolute;
+    width: 17px;
+    height: 16px;
+    left: -2px;
+    top: 10px;
+    -webkit-transform: rotate(45deg);
+    -moz-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    -o-transform: rotate(45deg);
+    transform: rotate(45deg);
+    box-shadow: inset 0 0 0 32px, 10px -6px 0 0;
+}
+.imageBtn:after {
+    content: '';
+    -webkit-border-radius: 50%;
+    -moz-border-radius: 50%;
+    -o-border-radius: 50%;
+    border-radius: 50%;
+    position: absolute;
+    width: 3px;
+    height: 3px;
+    box-shadow: inset 0 0 0 32px;
+    top: 5px;
+    right: 5px
+}
+.visitorImageBtn{
+    float: left;
+    margin-left: 20px;
+    margin-top: 2px;
+}
 .faceBox{
     width: 100%;
     background: #fff;

static/html/chat_main.html

@@ -132,6 +132,7 @@
                         </div>
                         <el-input type="textarea" class="chatArea" v-model="messageContent"  v-on:keyup.enter.native="chatToUser"></el-input>
                         <div class="faceBtn"></div>
+                        <div class="imageBtn" id="uploadImg" v-on:click="uploadImg('/uploadimg')"></div>
                         <el-button class="floatRight" type="primary" v-on:click="chatToUser">发送</el-button>
                         <div class="clear"></div>
                     </div>
@@ -575,6 +576,40 @@
                 $('.faceBox').hide();
                 this.messageContent+="face"+this.face[index].name;
             },
+            //上传图片
+            uploadImg (url){
+                let _this=this;
+                $('#uploadImg').after('<input type="file" id="uploadImgFile" name="file" style="display:none" >');
+                $("#uploadImgFile").click();
+                $("#uploadImgFile").change(function (e) {
+                    var formData = new FormData();
+                    var file = $("#uploadImgFile")[0].files[0];
+                    formData.append("imgfile",file); //传给后台的file的key值是可以自己定义的
+                    filter(file) && $.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+='img[/' + res.result.path + ']';
+                                _this.chatToUser();
+                            }
+                        },
+                        error: function (data) {
+                            console.log(data);
+                        }
+                    });
+                });
+            },
        },
         created: function () {
             //jquery

static/html/chat_page.html

@@ -6,13 +6,13 @@
     <meta name="author" content="陶士涵">
     <title>GO-FLY咨询页</title>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.1/lib/theme-chalk/index.css">
-    <script src="/static/js/functions.js"></script>
+    <script src="/static/js/functions.js?v=0.1.1"></script>
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.1/lib/index.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
     <!-- Bootstrap core CSS -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
-    <link rel="stylesheet" href="/static/css/common.css" />
+    <link rel="stylesheet" href="/static/css/common.css?v=0.1.1" />
     <style>
         html,
         body {
@@ -25,7 +25,7 @@
             width: 100%;
             text-align: left;
             position: relative;
-            margin-bottom: 69px;
+            margin-bottom: 86px;
         }
         .chatBox{
             /*max-height: 600px;*/
@@ -72,16 +72,16 @@
         .chatBoxMe .el-col-3{float: right;text-align: right;}
         .chatBoxMe .chatUser{text-align: right}
         .chatBoxMe .chatContent:after{left:auto;right: -10px;}
-        .chatArea{float: left;width: 79%;margin: 4px 0 0 4px;}
+        .chatArea{float: left;width: 89%;margin: 4px 0 0 4px;}
-        .btnArea{width: 20%;float: right;}
+        .btnArea{width: 10%;float: right;}
         @media screen and (max-width: 500px) {
             body{background: #fff}
-            .chatArea {width: 66%;}
+            .chatArea {width: 70%;}
-            .btnArea{width: 32%;}
+            .btnArea{width: 20%;}
         }
 
         .chatTitle{height: 30px;line-height: 30px;color: #1989fa}
-        .chatBoxSend{background: #f5f5f5;position: fixed;bottom: 0;width: 100%;height: 67px;max-width: 800px;}
+        .chatBoxSend{background: #f5f5f5;position: fixed;bottom: 0;width: 100%;height: 86px;max-width: 800px;}
         .chatBoxSendBtn{float: right;margin: 12px 4px 0 0;}
         .chatTime{text-align: center;color: #bbb;margin: 5px 0;font-size: 12px;}
         .chatTimeHide{display: none;}
@@ -118,6 +118,11 @@
             </div>
         </div>
         <div class="chatBoxSend">
+            <div class="iconBtns">
+                <div class="faceBtn visitorFaceBtn"></div>
+                <div class="imageBtn visitorImageBtn" id="uploadImg" v-on:click="uploadImg('/uploadimg')"></div>
+                <div class="clear"></div>
+            </div>
             <el-input type="textarea" class="chatArea" v-model="messageContent" v-on:keyup.enter.native="chatToUser"></el-input>
             <div class="faceBox visitorFaceBox">
                 <ul class="faceBoxList">
@@ -127,8 +132,6 @@
             </div>
             <div class="btnArea">
                 <el-button type="primary" class="chatBoxSendBtn" size="small" v-on:click="chatToUser">{{.SendBtn}}</el-button>
-                <div class="faceBtn visitorFaceBtn"></div>
-                <div class="clear"></div>
             </div>
             <div class="clear"></div>
         </div>
@@ -436,6 +439,40 @@
                 $('.faceBox').hide();
                 this.messageContent+="face"+this.face[index].name;
             },
+            //上传图片
+            uploadImg (url){
+                let _this=this;
+                $('#uploadImg').after('<input type="file" id="uploadImgFile" name="file" style="display:none" >');
+                $("#uploadImgFile").click();
+                $("#uploadImgFile").change(function (e) {
+                    var formData = new FormData();
+                    var file = $("#uploadImgFile")[0].files[0];
+                    formData.append("imgfile",file); //传给后台的file的key值是可以自己定义的
+                    filter(file) && $.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+='img[/' + res.result.path + ']';
+                                _this.chatToUser();
+                            }
+                        },
+                        error: function (data) {
+                            console.log(data);
+                        }
+                    });
+                });
+            },
         },
         created: function () {
             this.init();

static/html/nav.html

@@ -2,7 +2,7 @@
 <el-menu
         default-active="3"
         mode="horizontal">
-    <el-menu-item  class="mainLogo" v-on:click="openUrl('/login')">GO-FLY<span class="version">V0.0.8</span></el-menu-item>
+    <el-menu-item  class="mainLogo" v-on:click="openUrl('/login')">GO-FLY<span class="version">V0.1.1</span></el-menu-item>
     <el-menu-item style="display:none" index="2" v-on:click="openIframeUrl('/list')">邮箱<el-badge class="mark" :value="mailTotal" style="margin-bottom: 20px;"/>
     </el-menu-item>
     <el-menu-item index="3" v-on:click="openIframeUrl('/chat_main')">聊天</el-menu-item>

static/js/functions.js

@@ -73,8 +73,24 @@ function replaceContent (content) {// 转义聊天内容中的特殊字符
             var alt = face.replace(/^face/g, '');
             return '<img alt="' + alt + '" title="' + alt + '" src="' + faces[alt] + '">';
         })
+        .replace(/img\[([^\s\[\]]+?)\]/g, function (face) {  // 转义图片
+            var src = face.replace(/^img\[/g, '').replace(/\]/g, '');;
+            return '<img  src="' + src + '" style="max-width: 100%"/>';
+        })
         .replace(html(), '\<$1 $2\>').replace(html('/'), '\</$1\>') // 转移HTML代码
         .replace(/\n/g, '<br>') // 转义换行
 
     return content;
 }
+
+function filter (obj){
+    var imgType = ["image/jpeg","image/png","image/jpg"];
+    var filetypes = imgType;
+    var isnext = false;
+    for (var i = 0; i < filetypes.length; i++) {
+        if (filetypes[i] == obj.type) {
+            return true;
+        }
+    }
+    return false;
+}