文件上传失败时，消息标记为failed

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, // 上传中

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)
   }

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 {

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 {

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(
                 <div class="loading-circular" v-loading="true"></div>
               </div>
               <div
-                v-else-if="msgStatus === msgSendStatus.FAILED"
+                v-else-if="
+                  msgStatus === msgSendStatus.FAILED || msgStatus === msgSendStatus.UPLOAD_FAILED
+                "
                 class="my-message-status my-message-status-failed"
               >
                 <el-icon color="red" title="点击重发" @click="onResendMsg"