新增上传图片功能

pull/30/head
taoshihan1991 4 years ago
parent 2af7557f81
commit a9ab178f71

@ -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

@ -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,
},
})
}
}

@ -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)
//设置消息已读

@ -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;
margin: 16px 4px 0 0;
float: left;
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;

@ -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

@ -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;}
.btnArea{width: 20%;float: right;}
.chatArea{float: left;width: 89%;margin: 4px 0 0 4px;}
.btnArea{width: 10%;float: right;}
@media screen and (max-width: 500px) {
body{background: #fff}
.chatArea {width: 66%;}
.btnArea{width: 32%;}
.chatArea {width: 70%;}
.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();

@ -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>

@ -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;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.0 KiB

Loading…
Cancel
Save