2025-10-14

发送图片

src/views/Chat.vue

@@ -279,7 +279,23 @@
               :rows="3"
               placeholder="请输入消息..."
           ></el-input>
+          <el-row :gutter="24">
+            <el-col :span="12">
+              <el-upload
+                  action="/mid/upload/image"
+                  :headers="headers"
+                  :on-success="uploadSuccess"
+                  :on-error="uploadError"
+                  :show-file-list="false"
+                  accept="image/png, image/jpeg"
+                  :limit="1">
+                <el-button type="primary">发送图片</el-button>
+              </el-upload>
+            </el-col>
+            <el-col :span="12">
               <el-button type="primary" @click="handleSendMsg">发送</el-button>
+            </el-col>
+          </el-row>
         </div>
       </div>
     </el-dialog>
@@ -302,6 +318,9 @@ import {io} from 'socket.io-client';
 
 const {proxy} = getCurrentInstance();
 const userStore = useUserStore()
+const headers = {
+  Authorization: `Bearer ${userStore.token}`
+}
 
 // 统计
 const stats = ref({
@@ -557,6 +576,20 @@ const handleSendMsg = () => {
   inputText.value = ''
 }
 
+const uploadSuccess = (res) => {
+  socket.value.emit('clientMsg', {
+    groupId: params.value.groupId,
+    createId: userStore.user.id,
+    content: res.data.url,
+    type: 'img'
+  })
+}
+
+const uploadError = (res) => {
+  const result = JSON.parse(res.message)
+  ElMessage.error(result.message)
+}
+
 // 头像字
 const getRoleInitial = (createId) => {
   if (messageUserId.value === createId) {