上传文件重命名, 避免重名覆盖

src/views/Conversations/Components/Input/MediaUpload.jsx

@@ -1,4 +1,5 @@
 import { Upload, Button, message, Tooltip } from 'antd';
+import { useState } from 'react';
 import { FileAddOutlined } from '@ant-design/icons';
 import { v4 as uuid } from 'uuid';
 import { API_HOST } from '@/config';
@@ -29,17 +30,17 @@ const ImageUpload = ({ disabled, invokeUploadFileMessage, invokeSendUploadMessag
   // const setComplexMsg = useConversationStore(state => state.setComplexMsg);
   // const complexMsg = useConversationStore(state => state.complexMsg);
 
+  const [fileObj, setFileObj] = useState();
   const beforeUpload = async (file) => {
     // 使用 FileReader 读取文件对象
     const reader = new FileReader();
-    // 读取完毕后获取结果
-    reader.onload = (event) => {
-      const previewSrc = event.target.result;
     const suffix = file.name.slice(file.name.lastIndexOf('.')+1);
     const type = Object.keys(fileTypesExt).find((type) => fileTypesExt[type].includes(suffix));
-      const name = file.name;
     const rename = Date.now() + '.' + suffix;
-      const dataUri = aliOSSHost + file.name;
+    const dataUri = aliOSSHost + rename;
+    // 读取完毕后获取结果
+    reader.onload = (event) => {
+      const previewSrc = event.target.result;
       const msgObj = {
         type: type,
         name: file.name,
@@ -48,11 +49,12 @@ const ImageUpload = ({ disabled, invokeUploadFileMessage, invokeSendUploadMessag
         id: uuid(),
       };
       file.msgData = msgObj;
+      setFileObj(msgObj);
       invokeUploadFileMessage(msgObj);
     };
     // 把文件对象作为一个 dataURL 读入
     reader.readAsDataURL(file);
-    return file;
+    return new File([file], rename, { type: file.type })
   };
   const uploadProps = {
     name: 'file',
@@ -71,7 +73,7 @@ const ImageUpload = ({ disabled, invokeUploadFileMessage, invokeSendUploadMessag
       {...uploadProps}
       onChange={({file}) => {
         if (file.status === 'done') {
-          invokeSendUploadMessage(file.msgData);
+          invokeSendUploadMessage(fileObj);
         }
         if (file.status === 'error') {
           message.error(`添加失败`);

src/views/Conversations/Components/InputComposer.jsx

@@ -129,12 +129,12 @@ const InputComposer = () => {
     // 使用 FileReader 读取文件对象
     const reader = new FileReader();
     const suffix = file.name.slice(file.name.lastIndexOf('.')+1);
-    const newName = rename ? `${uuid()}.${suffix}` : file.name;
+    const newName = `${uuid()}.${suffix}`; // rename ? `${uuid()}.${suffix}` : file.name;
     const type = Object.keys(fileTypesExt).find((type) => fileTypesExt[type].includes(suffix));
     const dataUri = aliOSSHost + newName;
     const msgObj = {
       type: type,
-      name: newName,
+      name: file.name,
       uploadStatus: 'loading',
       data: { dataUri: dataUri, link: dataUri, width: '100%', height: 150, loading: 0.01 },
       id: uuid(),