From 43c7dc053206c012956760d683195f2cb2bf4af6 Mon Sep 17 00:00:00 2001 From: bob <312777916@qq.com> Date: Wed, 16 Apr 2025 16:14:24 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=87=E4=BB=B6=E4=B8=8A=E4=BC=A0=E5=A4=B1?= =?UTF-8?q?=E8=B4=A5=E6=97=B6=EF=BC=8C=E6=B6=88=E6=81=AF=E6=A0=87=E8=AE=B0?= =?UTF-8?q?=E4=B8=BAfailed?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/const/msgConst.js | 8 +++++-- src/views/message/components/InputEditor.vue | 18 +++++++++++---- .../message/components/InputRecorder.vue | 23 +++++++++++++------ src/views/message/components/InputToolBar.vue | 19 ++++++++++----- src/views/message/components/MessageItem.vue | 8 +++++-- 5 files changed, 54 insertions(+), 22 deletions(-) diff --git a/src/const/msgConst.js b/src/const/msgConst.js index b13978b..0aebc2c 100644 --- a/src/const/msgConst.js +++ b/src/const/msgConst.js @@ -27,10 +27,14 @@ export const msgContentType = { export const msgSendStatus = { PENDING: 'pending', // 发送中 OK: 'ok', // 发送成功 - FAILED: 'failed' // 发送失败 + FAILED: 'failed', // 发送失败 + UPLOAD_FAILED: 'uploadFailed' // 文件上传失败 } -// 消息中文件的上传状态 +/** + * 消息中文件的上传状态 + * 目前没有实现上传状态以及上传进度的效果 + */ export const msgFileUploadStatus = { UPLOAD_DEFAULT: 0, // 默认状态，不上传 UPLOADING: 1, // 上传中 diff --git a/src/views/message/components/InputEditor.vue b/src/views/message/components/InputEditor.vue index 8a9ce50..ffe9551 100644 --- a/src/views/message/components/InputEditor.vue +++ b/src/views/message/components/InputEditor.vue @@ -8,7 +8,7 @@ import { ElMessage } from 'element-plus' import { emojis } from '@/js/utils/emojis' import { base64ToFile } from '@/js/utils/common' import { mtsUploadServiceForImage } from '@/api/mts' -import { msgContentType, msgFileUploadStatus } from '@/const/msgConst' +import { msgContentType, msgFileUploadStatus, msgSendStatus } from '@/const/msgConst' import { getMd5 } from '@/js/utils/file' import { generateThumb } from '@/js/utils/image' @@ -285,8 +285,10 @@ const handleEnter = async () => { }) if (contentObj.needUploadCount > 0) { - msg.uploadStatus = msgFileUploadStatus.UPLOADING - msg.uploadProgress = 0 + messageData.updateMsg(msg.sessionId, msg.msgId, { + uploadStatus: msgFileUploadStatus.UPLOADING, + uploadProgress: 0 + }) } else { emit('sendMessage', msg) } @@ -300,12 +302,18 @@ const handleEnter = async () => { // callback：如果有失败的上传，则状态修改为上传失败 callbacks.someUploadedFailFn = () => { - msg.uploadStatus = msgFileUploadStatus.UPLOAD_FAILED + messageData.updateMsg(msg.sessionId, msg.msgId, { + uploadStatus: msgFileUploadStatus.UPLOAD_FAILED, + status: msgSendStatus.UPLOAD_FAILED + }) } // callback：所有图片均上传，则发送消息 callbacks.allUploadedSuccessFn = () => { - msg.uploadStatus = msgFileUploadStatus.UPLOAD_SUCCESS + messageData.updateMsg(msg.sessionId, msg.msgId, { + uploadStatus: msgFileUploadStatus.UPLOAD_SUCCESS, + uploadProgress: 100 + }) msg.content = contentObj.contentFromServer.join('').trim() emit('sendMessage', msg) } diff --git a/src/views/message/components/InputRecorder.vue b/src/views/message/components/InputRecorder.vue index ab7f8d1..7f47237 100644 --- a/src/views/message/components/InputRecorder.vue +++ b/src/views/message/components/InputRecorder.vue @@ -2,14 +2,15 @@ import { ref, onMounted, onUnmounted, watch, computed } from 'vue' import { Microphone } from '@element-plus/icons-vue' import { ElMessage } from 'element-plus' -import { useAudioStore } from '@/stores' +import { useMessageStore, useAudioStore } from '@/stores' import { mtsUploadService } from '@/api/mts' import { v4 as uuidv4 } from 'uuid' -import { msgContentType, msgFileUploadStatus } from '@/const/msgConst' +import { msgContentType, msgFileUploadStatus, msgSendStatus } from '@/const/msgConst' import { getMd5 } from '@/js/utils/file' const emit = defineEmits(['exit', 'sendMessage', 'saveLocalMsg']) +const messageData = useMessageStore() const audioData = useAudioStore() const spaceDown = ref(false) // 空格键是否被按下 const isRecord = ref(false) // 是否开始录音 @@ -166,8 +167,11 @@ const uploadRecord = async () => { msg = result } }) - msg.uploadStatus = msgFileUploadStatus.UPLOADING - msg.uploadProgress = 0 + + messageData.updateMsg(msg.sessionId, msg.msgId, { + uploadStatus: msgFileUploadStatus.UPLOADING, + uploadProgress: 0 + }) const md5 = await getMd5(file) const files = { @@ -186,8 +190,10 @@ const uploadRecord = async () => { .then((res) => { if (res.data.code === 0) { audioData.setAudio(res.data.data) // 缓存服务端响应的audio数据 - msg.uploadStatus = msgFileUploadStatus.UPLOAD_SUCCESS - msg.uploadProgress = 100 + messageData.updateMsg(msg.sessionId, msg.msgId, { + uploadStatus: msgFileUploadStatus.UPLOAD_SUCCESS, + uploadProgress: 100 + }) msg.content = JSON.stringify({ type: msgContentType.RECORDING, value: res.data.data.objectId @@ -196,7 +202,10 @@ const uploadRecord = async () => { } }) .catch((error) => { - msg.uploadStatus = msgFileUploadStatus.UPLOAD_FAILED + messageData.updateMsg(msg.sessionId, msg.msgId, { + uploadStatus: msgFileUploadStatus.UPLOAD_FAILED, + status: msgSendStatus.UPLOAD_FAILED + }) if (error.status === 200 && error.data?.code !== 0) { ElMessage.error(error.data.desc || '文件上传失败') } else { diff --git a/src/views/message/components/InputToolBar.vue b/src/views/message/components/InputToolBar.vue index 0f0e44a..902bfea 100644 --- a/src/views/message/components/InputToolBar.vue +++ b/src/views/message/components/InputToolBar.vue @@ -18,7 +18,7 @@ import { useDocumentStore } from '@/stores' import { MsgType } from '@/proto/msg' -import { msgContentType, msgFileUploadStatus } from '@/const/msgConst' +import { msgContentType, msgFileUploadStatus, msgSendStatus } from '@/const/msgConst' import { generateThumb } from '@/js/utils/image' import { getMd5 } from '@/js/utils/file' @@ -58,8 +58,6 @@ const onSelectedFile = async (file) => { msg = result } }) - msg.uploadStatus = msgFileUploadStatus.UPLOADING - msg.uploadProgress = 0 let requestApi = mtsUploadService const requestBody = { @@ -80,18 +78,27 @@ const onSelectedFile = async (file) => { requestApi = mtsUploadServiceForImage } + messageData.updateMsg(msg.sessionId, msg.msgId, { + uploadStatus: msgFileUploadStatus.UPLOADING, + uploadProgress: 0 + }) requestApi(requestBody, files) .then((res) => { if (res.data.code === 0) { setStoreData(contentType, res.data.data) - msg.uploadStatus = msgFileUploadStatus.UPLOAD_SUCCESS - msg.uploadProgress = 100 + messageData.updateMsg(msg.sessionId, msg.msgId, { + uploadStatus: msgFileUploadStatus.UPLOAD_SUCCESS, + uploadProgress: 100 + }) msg.content = JSON.stringify({ type: contentType, value: res.data.data.objectId }) emit('sendMessage', msg) } }) .catch((error) => { - msg.uploadStatus = msgFileUploadStatus.UPLOAD_FAILED + messageData.updateMsg(msg.sessionId, msg.msgId, { + uploadStatus: msgFileUploadStatus.UPLOAD_FAILED, + status: msgSendStatus.UPLOAD_FAILED + }) if (error.status === 200 && error.data?.code !== 0) { ElMessage.error(error.data.desc || '文件上传失败') } else { diff --git a/src/views/message/components/MessageItem.vue b/src/views/message/components/MessageItem.vue index 6be59dc..632ea41 100644 --- a/src/views/message/components/MessageItem.vue +++ b/src/views/message/components/MessageItem.vue @@ -636,7 +636,9 @@ const onClickSystemMsg = (e) => { } const onResendMsg = () => { - emit('resendMsg', msg.value) + if (msg.value.status === msgSendStatus.FAILED) { + emit('resendMsg', msg.value) + } } /** @@ -693,7 +695,9 @@ watch(