diff --git a/src/views/Conversations/Components/Input/MediaUpload.jsx b/src/views/Conversations/Components/Input/MediaUpload.jsx index 04f0b8a..64a4b2a 100644 --- a/src/views/Conversations/Components/Input/MediaUpload.jsx +++ b/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(); + const suffix = file.name.slice(file.name.lastIndexOf('.')+1); + const type = Object.keys(fileTypesExt).find((type) => fileTypesExt[type].includes(suffix)); + const rename = Date.now() + '.' + suffix; + const dataUri = aliOSSHost + rename; // 读取完毕后获取结果 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 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(`添加失败`); diff --git a/src/views/Conversations/Components/InputComposer.jsx b/src/views/Conversations/Components/InputComposer.jsx index 1fa8f08..c0ea3ea 100644 --- a/src/views/Conversations/Components/InputComposer.jsx +++ b/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(),