添加发送文件功能

src/api/tool.js

@@ -10,7 +10,7 @@ export const GetRedisInfoService = (Data) => {
     let request1 = getRequest();
     return request1.post('/tool/get_redis', params,{
         headers: {
-            'token': Data.token, // 鐏忥拷 token 閺囨寧宕叉稉鐑樺亶閻ㄥ嫪鎶ら悧灞解偓锟<E58193>  
+            'token': Data.token, // 閻忓骏鎷<EFBFBD> token 闁哄洦瀵у畷鍙夌▔閻戞ê浜堕柣銊ュ閹躲倝鎮х仦瑙ｅ亾閿燂拷  
         }
     })
 }
@@ -24,3 +24,13 @@ function getRequest() {
     }
     return request1;
 }
+
+export const UploadFileService = (formData,token) => {
+    //let request1 = getRequest();
+    return request2.post('/tool/upload', formData,{
+        headers: {
+            'Content-Type': 'multipart/form-data',
+            'token': token, 
+        }
+    })
+}

src/views/Chat.vue

@@ -1,4 +1,16 @@
 <template>
+  <el-dialog
+            title="图片发送"
+            v-model="sendImgDialogVisible"
+            width="60%"
+            height="60%"
+            center
+      >
+      <!-- 图片输入 -->
+      <input type="file" @change="handleFileUpload" />
+      <el-button type="primary" size="default" @click="sendImageOrVideo" >发送</el-button>
+  </el-dialog>
+
   <el-container
     class="layout-container-demo"
     style="height: 700px; width: 1000px"
@@ -165,12 +177,21 @@
       <div>
       </div>
       <div>  
+
        <el-row class="row-bg" type="flex" justify="space-around" align="middle">
+       <el-button
+                type="primary"
+                size="default"
+                @click="SendImage"
+                class="send-image-button-bg"
+            >
+                文件发送
+            </el-button>
         <el-col :span="20">
           <el-input
             type="textarea"
             style="width: 100%"
-            rows="2"
+            rows="1"
             autofocus
             @keyup.enter="handleSendBtnClick"
             placeholder="请输入消息按Enter发送"
@@ -196,9 +217,12 @@
 <script>
 import axios from "axios";
 import { inject } from "vue";
+import { ref } from 'vue';
 import { getFriendListService } from "@/api/chat.js";
 import { getMessageService } from "@/api/chat.js";
 import { sendMessageService } from "@/api/chat.js";
+import { UploadFileService } from "@/api/tool.js";
+import FileUpload from "@/views/FileUpload.vue";
 import {
   ElAvatar,
   ElDropdown,
@@ -223,6 +247,8 @@ export default {
     return {
       ip: "",
       tableData: [],
+      sendImgDialogVisible: false,
+      file : null,
       tokenData: {
         token: localStorage.getItem("token"),
         ip: localStorage.getItem("ip"),
@@ -397,6 +423,9 @@ export default {
       // 使用 MarkdownIt 解析 Markdown 字符串并返回 HTML  
       return this.md.render(markdown);
     },
+    SendImage() {
+      this.sendImgDialogVisible = true;
+    },
 
     connectWebSocket() {
       // 连接WebSocket
@@ -577,6 +606,7 @@ export default {
         console.error(error);
       }
     },
+    
     handleMenuSelect(val) {
       router.push(val);
       //关闭websocket
@@ -584,6 +614,81 @@ export default {
         this.socket.close();
       }
     },
+    handleFileUpload(e) {
+      this.file = e.target.files[0];
+      console.log("file has been selected:", this.file);
+    },
+    async sendImageOrVideo(){
+      if (this.file == null) {
+        alert('请先选择要上传的文件');
+        return;
+      }
+      //查看文件是否是图片或视频
+ 
+      try {
+        let formData = new FormData();
+        formData.append('file', this.file);
+        //console.log("add file: " + this.file);
+        formData.append('upload_type', "1");
+        formData.append('auth_type', "public");
+        //console.log("formData:",formData);
+
+      
+        let result = await UploadFileService(formData,this.tokenData.token);
+        if (result.code!== 0) {
+          ElMessage.error('上传文件失败，请稍后再试');
+          return;
+        }
+        let resp_data = result.data;
+        //console.log("resp:",resp_data);
+        let url = "https://gep.ljsea.top/tool/file/"+resp_data.file_store_name;
+        let msg_ ="";
+        //markdown 图片格式
+        let fileType = this.file.name.split('.')[1];
+          if (!['jpg', 'jpeg', 'png', 'gif', 'mp4'].includes(fileType)) {
+            //alert('请选择正确的图片或视频格式');
+             msg_ = `文件：[${resp_data.file_name}](${url})`;
+          }else{
+            msg_ = `![${resp_data.file_name}](${url})`;
+           
+          }
+        
+ 
+        let req = {
+          token: localStorage.getItem("token"),
+          ip: localStorage.getItem("ip"),
+          userId: localStorage.getItem("userId"),
+          username: localStorage.getItem("username"),
+          from_user_id: localStorage.getItem("userId"),
+          to_user_id: this.to_user_id,
+          group_id: this.cur_group_id,
+          msg: msg_,
+          type: this.msg_type,
+        };
+        result = await sendMessageService(req);
+        if (result.code !== 0) {
+          ElMessage({
+            message: "消息发送失败！",
+            type: "error",
+          });
+        }
+        let msg = {
+          ID: result.data.id,
+          FromUserID: localStorage.getItem("userId"),
+          ToUserID: this.to_user_id,
+          GroupID: this.cur_group_id,
+          Msg: msg_,
+          CreatedAt: new Date(),
+        };
+        //console.log("msg:",msg);
+        this.MsgList.push(msg);
+        this.scrollToBottom();
+        this.sendImgDialogVisible = false;
+      } catch (error) {
+        ElMessage.error('上传文件时出现网络错误，请稍后再试');
+        console.error(error);
+      }
+    },
     toVideoList() {
       router.push("/videoList");
     },
@@ -686,4 +791,10 @@ export default {
   border-radius: 50%;
   transform: translate(50%, -50%);
 }
+
+.send-image-button-bg {
+    background-image: url(../assets/img.jpg);
+    background-size: cover;
+    background-repeat: no-repeat;
+}
 </style>