文档上传处理

src/pages/chat/queryChat/ChatFooter/SendActionBar/index.tsx

@@ -12,8 +12,8 @@ import emoji from "@/assets/images/chatFooter/emoji.png";
 import image from "@/assets/images/chatFooter/image.png";
 import rtc from "@/assets/images/chatFooter/rtc.png";
 import video from "@/assets/images/chatFooter/video.png";
+import file from "@/assets/images/chatFooter/file.png";
 import { EmojiData } from "@/components/CKEditor";
-
 import { SendMessageParams } from "../useSendMessage";
 import CallPopContent from "./CallPopContent";
 import EmojiPopContent from "./EmojiPopContent";
@@ -43,6 +43,14 @@ const sendActionList = [
     comp: null,
     placement: undefined,
   },
+  {
+    title: t("placeholder.image"),
+    icon: file,
+    key: "file",
+    accept: "*",
+    comp: null,
+    placement: undefined,
+  },
   {
     title: t("placeholder.call"),
     icon: rtc,
@@ -57,17 +65,18 @@ i18n.on("languageChanged", () => {
   sendActionList[0].title = t("placeholder.emoji");
   sendActionList[1].title = t("placeholder.image");
   sendActionList[2].title = t("placeholder.video");
-  sendActionList[3].title = t("placeholder.call");
+  sendActionList[3].title = t("placeholder.file");
+  sendActionList[4].title = t("placeholder.call");
 });
 
 const SendActionBar = ({
   sendEmoji,
   sendMessage,
-  createImageOrVideoMessage,
+  createFileMessage,
 }: {
   sendEmoji: (emoji: EmojiData) => void;
   sendMessage: (params: SendMessageParams) => Promise<void>;
-  createImageOrVideoMessage: (file: File) => Promise<MessageItem>;
+  createFileMessage: (file: File) => Promise<MessageItem>;
 }) => {
   const [visibleState, setVisibleState] = useState({
     rtc: false,
@@ -85,7 +94,7 @@ const SendActionBar = ({
       antdMessage.warning(t("empty.fileContentEmpty"));
       return;
     }
-    const message = await createImageOrVideoMessage(fileEl);
+    const message = await createFileMessage(fileEl);
     sendMessage({
       message,
     });

src/pages/chat/queryChat/ChatFooter/SendActionBar/useFileMessage.ts

@@ -52,15 +52,32 @@ export function useFileMessage() {
     return (await IMSDK.createVideoMessageByFile(options)).data;
   };
 
-  const createImageOrVideoMessage = async (
+  const getFileMessage = async (file: File) => {
+    const options = {
+      filePath: '',
+      fileName: file.name,
+      uuid: uuidV4(),
+      sourceUrl: '',
+      fileSize: file.size,
+      fileType: file.type,
+      file
+    };
+
+    return (await IMSDK.createFileMessageByFile(options)).data;
+  };
+
+  const createFileMessage = async (
     file: FileWithPath,
   ): Promise<MessageItem> => {
     const isImage = file.type.includes("image");
     if (isImage) {
       return await getImageMessage(file);
+    } else if(file.type.includes("video")) {
+      const snapShotFile = await getVideoSnshotFile(file);
+      return await getVideoMessage(file, snapShotFile);
+    } else {
+      return await getFileMessage(file);
     }
-    const snapShotFile = await getVideoSnshotFile(file);
-    return await getVideoMessage(file, snapShotFile);
   };
 
   const getPicInfo = (file: File): Promise<HTMLImageElement> =>
@@ -114,6 +131,6 @@ export function useFileMessage() {
     getImageMessage,
     getVideoMessage,
     getVideoSnshotFile,
-    createImageOrVideoMessage,
+    createFileMessage,
   };
 }

src/pages/chat/queryChat/ChatFooter/index.tsx

@@ -18,7 +18,7 @@ const ChatFooter = () => {
   const ckRef = useRef<CKEditorRef>(null);
   const textAreaRef = useRef<HTMLTextAreaElement>(document.createElement("textarea"));
 
-  const { createImageOrVideoMessage } = useFileMessage();
+  const { createFileMessage } = useFileMessage();
   const { sendMessage } = useSendMessage();
 
   const onChange = (value: string) => {
@@ -72,7 +72,7 @@ const ChatFooter = () => {
         <SendActionBar
           sendEmoji={sendEmoji}
           sendMessage={sendMessage}
-          createImageOrVideoMessage={createImageOrVideoMessage}
+          createFileMessage={createFileMessage}
         />
         <div className="relative flex flex-1 flex-col overflow-hidden">
           <CKEditor

src/pages/chat/queryChat/MessageItem/FileMessageRender.tsx

@@ -0,0 +1,47 @@
+import { FC } from "react";
+import Twemoji from "@/components/Twemoji";
+
+import { IMessageItemProps } from ".";
+import styles from "./message-item.module.scss";
+import { FileOutlined } from "@ant-design/icons";
+import { Flex, Space } from "antd";
+import { MessageStatus } from "@openim/wasm-client-sdk";
+
+const FileMessageRender: FC<IMessageItemProps> = ({ message }) => {
+  const fileElem = message.fileElem || { fileName: "", fileSize: 0, sourceUrl: "" };
+  const isSucceed = message.status === MessageStatus.Succeed;
+  const getFileSize = () => {
+    const fileSize = fileElem.fileSize / 1024;
+    if (fileSize > 1024) {
+      return (fileSize / 1024).toFixed(2) + 'M';
+    } else {
+      return fileSize.toFixed(1) + 'KB';
+    }
+  };
+  return (
+    <Twemoji dbSelectAll>
+      <Flex className={styles.bubble}>
+        <FileOutlined style={{ fontSize: "28px", marginRight: "6px" }} />
+        <div>
+          <div>{fileElem.fileName}</div>
+          {isSucceed ? (
+            <Space>
+              <span style={{ color: "gray" }}>{getFileSize()}</span>-
+              <a
+                href={fileElem.sourceUrl}
+                download={fileElem.fileName}
+                style={{ color: "#0289fa" }}
+              >
+                下载
+              </a>
+            </Space>
+          ) : (
+            "加载中..."
+          )}
+        </div>
+      </Flex>
+    </Twemoji>
+  );
+};
+
+export default FileMessageRender;

src/pages/chat/queryChat/MessageItem/TextMessageRender.tsx

@@ -13,8 +13,7 @@ const TextMessageRender: FC<IMessageItemProps> = ({ message }) => {
 
   return (
     <Twemoji dbSelectAll>
-      <div
-        className={styles.bubble}
+      <div className={styles.bubble}
         dangerouslySetInnerHTML={{ __html: content }}
       ></div>
     </Twemoji>

src/pages/chat/queryChat/MessageItem/index.tsx

@@ -13,6 +13,7 @@ import styles from "./message-item.module.scss";
 import MessageItemErrorBoundary from "./MessageItemErrorBoundary";
 import MessageSuffix from "./MessageSuffix";
 import TextMessageRender from "./TextMessageRender";
+import FileMessageRender from "./FileMessageRender";
 
 export interface IMessageItemProps {
   message: MessageItem;
@@ -26,6 +27,7 @@ const components: Record<number, FC<IMessageItemProps>> = {
   [MessageType.TextMessage]: TextMessageRender,
   [MessageType.PictureMessage]: MediaMessageRender,
   [MessageType.VideoMessage]: MediaMessageRender,
+  [MessageType.FileMessage]: FileMessageRender,
 };
 
 const MessageItem: FC<IMessageItemProps> = ({