0.0.30

完成发送文件，发送图片

src/views/chat/hall.vue

@@ -106,7 +106,7 @@
             </div> -->
             <div v-for="item in chatrecords" :key="item.id">
               <!--文字消息类型 对方-->
-              <div class="otherUserMessage" v-if="item.action=='recieved'">
+              <div class="otherUserMessage" v-if="item.action=='recieved'&&item.msg_type==1">
                 <div class="otherUserIcon">
                   <img :src="item.receiver_avatar">
                 </div>
@@ -115,7 +115,7 @@
                 </div>
               </div>
               <!--文字消息类型 我-->
-              <div class="meUserMessage" v-if="item.action=='said'">
+              <div class="meUserMessage" v-if="item.action=='said'&&item.msg_type==1">
                 <div class="meUserMessageText">
                   {{item.content}}
                 </div>
@@ -123,6 +123,75 @@
                   <img :src="item.user_avatar">
                 </div>
               </div>
+              <!-- 图片类型 对方-->
+              <div class="otherUserMessage" v-if="item.action=='recieved'&&item.msg_type==2">
+                <div class="otherUserIcon">
+                  <img :src="item.receiver_avatar">
+                </div>
+                <div class="otherUserMessageText">
+                  <div class="messageTypeImage">
+                    <img :src="item.content">
+                  </div>
+                </div>
+              </div>
+              <!-- 图片类型 我-->
+              <div class="meUserMessage" v-if="item.action=='said'&&item.msg_type==2">
+                <div class="meUserMessageText">
+                  <div class="messageTypeImage">
+                    <img :src="item.content">
+                  </div>
+                </div>
+                <div class="meUserIcon">
+                  <img :src="item.user_avatar">
+                </div>
+              </div>
+              <!--文件类型 对方-->
+              <div class="otherUserMessage" v-if="item.action=='recieved'&&item.msg_type==3">
+                <div class="otherUserIcon">
+                  <img :src="item.receiver_avatar">
+                </div>
+                <div class="otherUserMessageText">
+                  <div class="messageTypeFile">
+                    <div class="messageTypeFileTop">
+                      <div class="messageTypeFileInfo">
+                        <div class="messageTypeFileTitle">
+                          {{ JSON.parse(item.content).oldFileName }}
+                        </div>
+                        <div class="messageTypeFileIcon">
+                          <img src="@/assets/chat/file.png"/>
+                        </div>
+                      </div>
+                      <!-- <div class="messageTypeFileSize">20kb</div> -->
+                    </div>
+                    <div class="messageTypeFileLogo">恒星管理平台</div>
+                  </div>
+                </div>
+              </div>
+              <!--文件类型 我-->
+              <div class="meUserMessage" v-if="item.action=='said'&&item.msg_type==3">
+                <div class="meUserMessageText">
+                  <div class="messageTypeFile">
+                    <div class="messageTypeFileTop">
+                      <div class="messageTypeFileInfo">
+                        <div class="messageTypeFileTitle">
+                          {{ JSON.parse(item.content).oldFileName }}
+                        </div>
+                        <div class="messageTypeFileIcon">
+                          <img src="@/assets/chat/file.png"/>
+                        </div>
+                      </div>
+                      <!-- <div class="messageTypeFileSize">20kb</div> -->
+                    </div>
+                    <div class="messageTypeFileLogo">恒星管理平台</div>
+                  </div>
+                </div>
+                <div class="meUserIcon">
+                  <img :src="item.user_avatar" />
+                </div>
+              </div>
+
+
+
             </div>
             <!-- 文件类型
             <div class="meUserMessage">
@@ -145,17 +214,7 @@
               </div>
             </div> -->
 
-            <!-- 图片类型
-            <div class="meUserMessage">
-              <div class="meUserMessageText">
-                <div class="messageTypeImage">
-                  <img src="@/assets/chat/user/user.png" alt="">
-                </div>
-              </div>
-              <div class="meUserIcon">
-                <img src="@/assets/chat/user/user.png" alt="">
-              </div>
-            </div> -->
+            
 
             <!--发名片
             <div class="meUserMessage">
@@ -247,7 +306,8 @@
               </el-input>
             </div>
             <div class="sendMessageButton">
-              <el-button type="primary" size="medium" @click="sendUserMessage">发送 <i class="el-icon-position"></i></el-button>
+              <el-button v-if="sendMessage.img.imgUrl!=''||sendMessage.file.fileUrl!=''" type="primary" size="medium" @click="sendUserMessageToFile">发送文件 <i class="el-icon-position"></i></el-button>
+              <el-button v-else type="primary" size="medium" @click="sendUserMessage">发送 <i class="el-icon-position"></i></el-button>
             </div>
           </div>
           <!--右侧菜单 start------------------------------------------------------------>
@@ -1686,6 +1746,50 @@ export default {
         this.$message.error('消息不能为空！')
       }
     },
+    // 5.3 发送图片或者文字
+    sendUserMessageToFile() {
+      if(this.sendMessage.img.imgUrl!=''){
+        const message = { 
+          talk_type:this.receiverType,//当前的会话类型
+          receiver_id:this.receiverId,//当前的会话id
+          content:this.sendMessage.img.imgUrl,//用户发发送的消息
+          msg_type:2,//消息类型 1：文本 2：图片 3：文件 4：好友卡片 5：系统消息；6：加群卡片
+        };
+        if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+          this.ws.send(JSON.stringify(message));
+          //发送完毕清除选择的图片
+          this.sendMessage.img.imgUrl='';
+        }
+        //如果文本框不为空，把文本框内的消息也提交过去
+        if(this.userMessage.trim()!=''){
+          this.sendUserMessage();
+        }
+      }
+      if(this.sendMessage.file.fileUrl!=''){
+        //把名称和地址打包成一个对象
+        const fileInfo = {
+          file_url:this.sendMessage.file.fileUrl,
+          oldFileName:this.sendMessage.file.oldFileName
+        }
+        const fileInfoString = JSON.stringify(fileInfo);
+        //发送消息
+        const message = { 
+          talk_type:this.receiverType,//当前的会话类型
+          receiver_id:this.receiverId,//当前的会话id
+          content:fileInfoString,//用户发发送的消息
+          msg_type:3,//消息类型 1：文本 2：图片 3：文件 4：好友卡片 5：系统消息；6：加群卡片
+        };
+        if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+          this.ws.send(JSON.stringify(message));
+          //发送完毕清除选择的文件
+          this.sendMessage.file.fileUrl='';
+        }
+        //如果文本框不为空，把文本框内的消息也提交过去
+        if(this.userMessage.trim()!=''){
+          this.sendUserMessage();
+        }
+      }
+    },
     //5.websocket会话 end---------------------------------------->
   },
   mounted() {
@@ -2540,7 +2644,7 @@ export default {
       .messageTypeFileInfo {
         display: flex;
         align-items: center;
-        padding:20px 20px 0 20px;
+        padding:20px 20px 20px 20px;
         .messageTypeFileTitle {
           font-size: 16px;
           color: #333;
@@ -2609,7 +2713,7 @@ export default {
   //发送图片
   .messageTypeImage {
     width: 200px;
-    height: 200px;
+    //height: 200px;
     img {
       max-width: 200px;
       border-radius: 16px;