feat(im): 客服聊天支持图片上传、独立OSS存储配置及发送失败状态处理

2026-11-12 03:48:55 +08:00 · 2026-11-11 22:41:18 +08:00
parent 60de941749
commit c398ff4717
10 changed files with 159 additions and 49 deletions
--- a/im/src/api/chat.js
+++ b/im/src/api/chat.js
@@ -1,4 +1,5 @@
 import { post, get, upload, del } from "@/utils/request";
+import config from "@/config/config";

 // 获取聊天列表服务接口
 export const ServeGetTalkList = (data) => {
@@ -69,9 +70,9 @@ export const ServeSendTalkFile = (data) => {
  return post("/im/talk/message/file", data);
 };

-// 发送聊天图片服务接口
+// 上传客服图片到独立 OSS；FormData 必须包含会话 ID，店铺及目录由后端推导。
 export const ServeSendTalkImage = (data) => {
-  return upload("/buyer/common/upload/file", data);
+  return upload("/im/message/image", data, { apiBase: config.BASE_API_URL });
 };

 // 发送表情包服务接口
--- a/im/src/components/chat/messaege/ImageMessage.vue
+++ b/im/src/components/chat/messaege/ImageMessage.vue
@@ -1,11 +1,11 @@
 <template>
  <div class="image-message no-select">
    <el-image
-      fit="cover"
+      fit="contain"
      :src="src"
-      :lazy="true"
      :style="getImgStyle(src)"
      :preview-src-list="[src]"
+      preview-teleported
    >
      <template #error>
        <div class="image-slot">图片加载失败...</div>
@@ -29,6 +29,10 @@ defineProps({
 })

 function getImgStyle(url) {
+  // 商城上传地址不携带尺寸，提供可见的预览区域；原尺寸后缀仍沿用旧展示规则。
+  if (!/\d+x\d+/.test(url.split('_').pop())) {
+    return { width: '200px', height: '200px', maxWidth: '100%' }
+  }
  return imgZoom(url, 200)
 }
 </script>
--- a/im/src/components/chat/panel/OtherLink.vue
+++ b/im/src/components/chat/panel/OtherLink.vue
@@ -295,7 +295,7 @@ function formatDateToString(date) {
  // margin-left: 12px;
 }
 :deep(.el-tabs__nav-scroll) {
-  min-width: 362px;
+  min-width: 0;
 }
 :deep(.el-tabs__item) {
  height: 100%;
--- a/im/src/components/chat/panel/TalkPanel.vue
+++ b/im/src/components/chat/panel/TalkPanel.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="flex">
-    <el-container class="ov-hidden flex-10 full-height ">
+    <el-container class="ov-hidden flex-10 full-height chat-main">
      <PanelHeader ref="panelHeader" :data="params" :online="isOnline" :keyboard="inputEvent"
        @event="handleHeaderEvent" />
      <!-- 主体信息 -->
@@ -65,7 +65,7 @@
                      <pre v-if="!emojistwo.includes(item.text)" v-html="item.text" />
                      <pre v-if="emojistwo.includes(item.text)" v-html="textReplaceEmoji(item.text)" />
                    </div>
-                   
+                    <ImageMessage v-if="item.messageType === 'PICTURE'" :src="item.text" />
                  </div>
                   <div v-if="item.webSocketStatus" class="tips">网络异常发送失败，请重新发送。</div>

@@ -163,7 +163,7 @@
      <!-- 页脚信息 -->
      <el-footer class="footer-box" height="180">
        <template v-if="multiSelect.isOpen === false">
-          <MeEditor @send="submitSendMessage" @keyboard-event="onKeyboardEvent" />
+          <MeEditor :talk-id="params.talkId" @send="submitSendMessage" @send-image="submitSendImage" @keyboard-event="onKeyboardEvent" />
        </template>
        <template v-else>
          <PanelToolbar v-model="multiSelect.items.length" @event="handleMultiMode" />
@@ -185,7 +185,7 @@
    </transition>

    <!-- 链接信息 -->
-    <OtherLink :toUser="toUser" :id="id" :goodsParams="goodsParams" class="flex-4" />
+    <OtherLink :toUser="toUser" :id="id" :goodsParams="goodsParams" class="chat-sidebar" />
  </div>
 </template>
 <script setup>
@@ -202,6 +202,7 @@ import { textReplaceEmoji, emojistwo } from "@/utils/emojis";
 import OtherLink from "@/components/chat/panel/OtherLink.vue";
 import TalkSearchRecord from "@/components/chat/TalkSearchRecord";
 import MeEditor from "@/components/editor/MeEditor";
+import ImageMessage from "@/components/chat/messaege/ImageMessage.vue";
 import PanelHeader from "./PanelHeader";
 import PanelToolbar from "./PanelToolbar";
 import SocketInstance from "@/im-server/socket-instance";
@@ -414,16 +415,21 @@ function formateDateAndTimeToString(date) {
 // 重新发送消息
 function againSendMessage(val) {

-  submitSendMessage(val.text)
+  submitSendMessage(val.text, val.messageType)
 }

-// 回车键发送消息回调事件
-function submitSendMessage(content) {
+// 发送已上传图片，复用消息发送和失败重发流程。
+function submitSendImage(url) {
+  submitSendMessage(url, "PICTURE");
+}
+
+// 发送文本或图片，重发保持原类型，发送图片时保留文字草稿。
+function submitSendMessage(content, messageType = "MESSAGE") {
  const record = {
    operation_type: "MESSAGE",
    to: props.params.receiver_id,
    from: id.value,
-    message_type: "MESSAGE",
+    message_type: messageType,
    context: content,
    talk_id: props.params.talkId,
  };
@@ -434,7 +440,7 @@ function submitSendMessage(content) {

  talkStore.UPDATE_TALK_ITEM({
    index_name: index_name.value,
-    draft_text: "",
+    ...(messageType === "MESSAGE" ? { draft_text: "" } : {}),
  });

  /**
@@ -445,7 +451,8 @@ function submitSendMessage(content) {
    fromUser: id.value,
    toUser: record.to,
    isRead: false,
-    messageType: "MESSAGE",
+    messageType,
+    talkId: record.talk_id,
    text: content,
    float: "right",
  };
@@ -465,7 +472,7 @@ function submitSendMessage(content) {
    });
  } else {
    talkStore.SET_TLAK_UNREAD_MESSAGE({
-      content: content,
+      content: messageType === "PICTURE" ? "[图片]" : content,
      nickname: record.name,
    });
  }
@@ -889,6 +896,17 @@ function talkPanelScrollBottom() {
 }
 </script>
 <style lang="less" scoped>
+/* 固定侧栏宽度，防止 tab 内容最小宽度挤压聊天区域。 */
+.chat-main {
+  flex: 1 1 0;
+  min-width: 0;
+}
+.chat-sidebar {
+  flex: 0 0 362px;
+  width: 362px;
+  min-width: 0;
+  overflow: hidden;
+}
 .flex-a-c{
  align-items: center;
  >div{
--- a/im/src/components/editor/MeEditor.vue
+++ b/im/src/components/editor/MeEditor.vue
@@ -21,11 +21,11 @@
            <legacy-el-icon name="el-icon-headset" />
            <p class="tip-title">语音消息</p>
          </li> -->
-          <!-- #TODO 发图片功能暂时隐藏 此处会涉及到token过期 -->
-          <!-- <li @click="$refs.restFile.click()">
+          <li role="button" tabindex="0" aria-label="发送图片" @click="restFile.click()"
+            @keydown.enter="restFile.click()" @keydown.space.prevent="restFile.click()">
            <legacy-el-icon name="el-icon-picture-outline-round" />
            <p class="tip-title">图片</p>
-          </li> -->
+          </li>
          <!-- <li @click="$refs.restFile2.click()">
            <legacy-el-icon name="el-icon-folder" />
            <p class="tip-title">附件</p>
@@ -117,8 +117,12 @@ import {
 } from "@/api/chat";

 defineOptions({ name: "MeEditor" });
+const props = defineProps({
+  // 后端 li_im_talk.id；不使用接收方 ID 代替会话 ID，避免图片存入错误会话。
+  talkId: { type: String, default: "" },
+});

-const emit = defineEmits(["keyboard-event", "send"]);
+const emit = defineEmits(["keyboard-event", "send", "send-image"]);

 const dialogueStore = useDialogueStore();

@@ -141,6 +145,10 @@ const imageViewer = reactive({
  isShow: false,
  file: null,
 });
+// 预览绑定原会话，上传期间切换会话后不发送，避免图片误发。
+let imageTalk = null;
+let imageTalkId = null;
+let uploadingImage = false;

 const codeBlock = reactive({
  isShow: false,
@@ -165,6 +173,8 @@ const sendtime = ref(0);
 const interval = ref(1000);

 watch(talkUser, (n_index_name) => {
+  imageViewer.isShow = false;
+  imageViewer.file = null;
  fileManageRef.value?.clear();
  editorText.value = getDraftText(n_index_name);
 });
@@ -253,6 +263,21 @@ function uploadFileChange(e) {

 // 打开图片查看器
 function openImageViewer(file) {
+  if (!file || uploadingImage) return;
+  if (!props.talkId) {
+    ElNotification.warning({ message: "会话尚未就绪，请稍后重试" });
+    return;
+  }
+  if (!/^image\/(png|jpeg|gif|webp)$/i.test(file.type) || !file.size) {
+    ElNotification.warning({ message: "请选择有效的 PNG、JPG、GIF 或 WebP 图片" });
+    return;
+  }
+  if (file.size > 10 * 1024 * 1024) {
+    ElNotification.warning({ message: "图片不能大于10MB" });
+    return;
+  }
+  imageTalk = talkUser.value;
+  imageTalkId = props.talkId;
  imageViewer.isShow = true;
  imageViewer.file = file;
 }
@@ -278,29 +303,34 @@ function confirmCodeBlock(data) {
  });
 }

-// 确认上传图片消息回调事件
-function confirmUploadImage() {
-  let fileData = new FormData();
-  fileData.append("file", imageViewer.file);
-
-  let imageView = imageViewerRef.value;
-
-  ServeSendTalkImage(fileData)
-    .then((res) => {
-      imageView.loading = false;
-      if (res.code == 200) {
-        imageView.closeBox();
-      } else {
-        ElNotification({
-          title: "友情提示",
-          message: res.message,
-          type: "warning",
-        });
-      }
-    })
-    .finally(() => {
-      imageView.loading = false;
-    });
+// 上传返回地址后通过现有消息通道发送；失败保留预览以便重试。
+async function confirmUploadImage() {
+  if (uploadingImage) return;
+  const imageView = imageViewerRef.value;
+  const targetTalk = imageTalk;
+  const targetTalkId = imageTalkId;
+  uploadingImage = true;
+  try {
+    const fileData = new FormData();
+    fileData.append("file", imageViewer.file);
+    fileData.append("talkId", targetTalkId);
+    const res = await ServeSendTalkImage(fileData);
+    if (res.code !== 200 || typeof res.result !== "string" || !/^https?:\/\//i.test(res.result)) {
+      throw new Error(res.message || "图片上传失败，请重试");
+    }
+    if (targetTalk !== talkUser.value || targetTalkId !== props.talkId || !imageViewer.isShow) {
+      ElNotification.warning({ message: "会话已切换，图片未发送，请在目标会话重新选择" });
+      return;
+    }
+    emit("send-image", res.result);
+    imageView.loading = false;
+    imageView.closeBox();
+  } catch (error) {
+    ElNotification.error({ message: error.message || "图片上传失败，请重试" });
+  } finally {
+    uploadingImage = false;
+    imageView.loading = false;
+  }
 }

 // 选中表情包回调事件
--- a/im/src/components/editor/MeEditorImageView.vue
+++ b/im/src/components/editor/MeEditorImageView.vue
@@ -62,7 +62,10 @@ function closeBox() {
  emit('close', false)
 }

+// 清理切换会话后的预览，仅对有效文件读取内容。
 function loadFile(file) {
+  src.value = ''
+  if (!file) return
  let reader = new FileReader()
  fileSize.value = Math.ceil(file.size / 1024)
  fileName.value = file.name
@@ -75,6 +78,7 @@ function loadFile(file) {

 // 确认按钮事件
 function uploadImage() {
+  if (loading.value || !src.value) return
  loading.value = true
  emit('confirm')
 }
--- a/im/src/im-server/socket-instance.js
+++ b/im/src/im-server/socket-instance.js
@@ -1,4 +1,5 @@
 import { useAppStore } from "@/stores/app";
+import { useDialogueStore } from "@/stores/dialogue";
 import config from "@/config/config";
 import WsSocket from "@/plugins/ws-socket";
 import { getToken } from "@/utils/auth";
@@ -86,6 +87,15 @@ class SocketInstance {
    });

    this.socket.on("event_error", (data) => {
+      // 将被服务端拒绝的图片标记为失败，避免乐观展示被误认为发送成功。
+      if (data.pictureUrl) {
+        useDialogueStore().records.forEach((record) => {
+          if (record.messageType === "PICTURE" && record.float === "right"
+              && record.talkId === data.talkId && record.text === data.pictureUrl) {
+            record.webSocketStatus = true;
+          }
+        });
+      }
      ElNotification({
        title: "友情提示",
        message: data.message,
--- a/im/src/plugins/ws-socket.js
+++ b/im/src/plugins/ws-socket.js
@@ -272,6 +272,12 @@ class WsSocket {
   * @param {Object} evt Websocket 消息
   */
  onMessage(evt) {
+    // 图片权限校验失败属于系统反馈，不能当成聊天消息插入记录。
+    const envelope = JSON.parse(evt.data);
+    if (envelope.messageResultType === "SYSTEM_TIPS") {
+      this.onCallBacks["event_error"]?.(envelope.result);
+      return;
+    }
    let result = this.onParse(evt);
    // 部分推送（在线状态、系统通知等）没有 text 字段，不做商品/群名解析直接透传
    const text = result.text;
--- a/im/src/utils/request.js
+++ b/im/src/utils/request.js
@@ -153,10 +153,12 @@ export const del = (url, data = {}, options = {}) => {
 * @returns {Promise<any>}
 */
 export const upload = (url, data = {}, options = {}) => {
+  // 默认沿用买家上传地址；客服图片显式选择 IM 服务，不将文件发往通用上传入口。
+  const { apiBase = config.BASE_BUYER, ...requestOptions } = options;
  return request({
-    url: config.BASE_BUYER + url,
+    url: apiBase + url,
    method: "post",
    data: data,
-    ...options,
+    ...requestOptions,
  });
 };
--- a/manager/src/views/sys/setting-manage/setting/IM_SETTING.vue
+++ b/manager/src/views/sys/setting-manage/setting/IM_SETTING.vue
@@ -6,6 +6,25 @@
        <span class="desc">配置买家端联系客服以及商家端登录客服跳转的路径</span>
      </el-form-item>

+      <el-divider content-position="left">客服图片存储</el-divider>
+      <el-form-item label="OSS Bucket" prop="imageOssBucket">
+        <el-input v-model.trim="formValidate.imageOssBucket" placeholder="客服图片专用桶名称" />
+        <span class="desc">使用独立于商品、头像的桶，并在 OSS 控制台设为公共读、私有写。</span>
+      </el-form-item>
+      <el-form-item label="OSS Endpoint" prop="imageOssEndpoint">
+        <el-input v-model.trim="formValidate.imageOssEndpoint" placeholder="oss-cn-beijing.aliyuncs.com" />
+        <span class="desc">填写公网节点域名，不含 https:// 或路径。</span>
+      </el-form-item>
+      <el-form-item label="AccessKey ID" prop="imageOssAccessKeyId">
+        <el-input v-model.trim="formValidate.imageOssAccessKeyId" autocomplete="off" />
+      </el-form-item>
+      <el-form-item label="AccessKey Secret" prop="imageOssAccessKeySecret">
+        <el-input v-model.trim="formValidate.imageOssAccessKeySecret" type="password" show-password autocomplete="new-password" />
+      </el-form-item>
+      <el-form-item>
+        <span class="desc">客户和客服的图片统一按会话所属店铺存储。支持 PNG、JPG、GIF、WebP，单张不超过10MB。四项均留空时无法发送图片，上传失败不会写入通用桶；持有图片链接即可查看。</span>
+      </el-form-item>
+
      <div class="label-btns">
        <el-button type="primary" @click="submit('formValidateRef')">保存</el-button>
      </div>
@@ -26,7 +45,11 @@ const { proxy } = getCurrentInstance();
 // 只做属性合并的成组对象
 const ruleValidate = reactive({}); // 验证规则
 const formValidate = ref({ // 表单数据
-  httpUrl: ""
+  httpUrl: "",
+  imageOssBucket: "",
+  imageOssEndpoint: "",
+  imageOssAccessKeyId: "",
+  imageOssAccessKeySecret: "",
 });
 const result = ref("");

@@ -57,18 +80,30 @@ function setupSetting() {
 function init() {
  result.value = JSON.parse(props.res);

-  formValidate.value = { ...result.value };
-  Object.keys(formValidate.value).forEach((item) => {
-    ruleValidate[item] = [
+  formValidate.value = { ...formValidate.value, ...result.value };
+  ruleValidate.httpUrl = [
      {
        required: true,
        message: "请填写必填项",
        trigger: "blur",
      },
    ];
+  ["imageOssBucket", "imageOssEndpoint", "imageOssAccessKeyId", "imageOssAccessKeySecret"].forEach((key) => {
+    ruleValidate[key] = [{ validator: validateImageStorage, trigger: "blur" }];
  });
 }

+// 四项配置可整体留空；填写任一项后必须完整，避免只保存节点或密钥导致上传不可用。
+function validateImageStorage(rule, value, callback) {
+  const keys = ["imageOssBucket", "imageOssEndpoint", "imageOssAccessKeyId", "imageOssAccessKeySecret"];
+  const values = keys.map((key) => (formValidate.value[key] || "").trim());
+  if (values.some(Boolean) && !values.every(Boolean)) {
+    callback(new Error("请完整填写客服图片 OSS 的四项配置"));
+    return;
+  }
+  callback();
+}
+
 init();
 </script>