From 35dbb41f3f3cd9ff778ff2d128cd0673d37c32de Mon Sep 17 00:00:00 2001 From: Lei OT Date: Tue, 26 Mar 2024 09:37:29 +0800 Subject: [PATCH] =?UTF-8?q?perf:=20=E4=B8=8A=E4=BC=A0=E7=9A=84=E6=A0=BC?= =?UTF-8?q?=E5=BC=8F=E5=92=8C=E5=A4=A7=E5=B0=8F=E9=99=90=E5=88=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/lib/msgUtils.js | 20 +++++++++ .../Components/Input/MediaUpload.jsx | 41 ++++++++----------- .../Components/InputComposer.jsx | 28 +++++++++---- 3 files changed, 58 insertions(+), 31 deletions(-) diff --git a/src/lib/msgUtils.js b/src/lib/msgUtils.js index edaa653..b524c61 100644 --- a/src/lib/msgUtils.js +++ b/src/lib/msgUtils.js @@ -552,6 +552,26 @@ export const whatsappError = { '131031': '[131031] 账户已锁定.', }; +export const whatsappSupportFileTypes = { + sticker: { types: ['image/webp'], size: 1024 * 100 }, + photo: { types: ['image/jpeg', 'image/png'], size: 1024 * 1024 * 5 }, + video: { types: ['video/mp4', 'video/3gp'], size: 1024 * 1024 * 16 }, + document: { + types: [ + 'text/plain', + 'application/pdf', + 'application/vnd.ms-powerpoint', + 'application/msword', + 'application/vnd.ms-excel', + 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', + 'application/vnd.openxmlformats-officedocument.presentationml.presentation', + 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', + ], + size: 1024 * 1024 * 100, + }, + audio: { types: ['audio/aac', 'audio/mp4', 'audio/mpeg', 'audio/amr', 'audio/ogg'], size: 1024 * 1024 * 16 }, +}; + /** * 系统弹窗通知 */ diff --git a/src/views/Conversations/Components/Input/MediaUpload.jsx b/src/views/Conversations/Components/Input/MediaUpload.jsx index 6084f67..8cb8f3e 100644 --- a/src/views/Conversations/Components/Input/MediaUpload.jsx +++ b/src/views/Conversations/Components/Input/MediaUpload.jsx @@ -1,48 +1,43 @@ -import { Upload, Button, message, Tooltip } from 'antd'; +import { App, 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'; -import useConversationStore from '@/stores/ConversationStore'; +import { whatsappSupportFileTypes } from '@/lib/msgUtils'; +import { isEmpty, } from '@/utils/utils'; +// import useConversationStore from '@/stores/ConversationStore'; const aliOSSHost = `https://haina-sale-system.oss-cn-shenzhen.aliyuncs.com/WAMedia/`; -/** - * image - * ext: ani;bmp;gif;ico;jpe;jpeg;jpg;pcx;png;psd;tga;tif;tiff;wmf - * - * audio - * ext: aac;ac3;aif;aifc;aiff;au;cda;dts;fla;flac;it;m1a;m2a;m3u;m4a;mid;midi;mka;mod;mp2;mp3;mpa;ogg;ra;rmi;spc;rmi;snd;umx;voc;wav;wma;xm - * - * video - * ext: 3g2;3gp;3gp2;3gpp;amr;amv;asf;avi;bdmv;bik;d2v;divx;drc;dsa;dsm;dss;dsv;evo;f4v;flc;fli;flic;flv;hdmov;ifo;ivf;m1v;m2p;m2t;m2ts;m2v;m4b;m4p;m4v;mkv;mp2v;mp4;mp4v;mpe;mpeg;mpg;mpls;mpv2;mpv4;mov;mts;ogm;ogv;pss;pva;qt;ram;ratdvd;rm;rmm;rmvb;roq;rpm;smil;smk;swf;tp;tpr;ts;vob;vp6;webm;wm;wmp;wmv - * - */ -const fileTypesExt = { - sticker: ['webp'], - photo: ['jpeg', 'jpg', 'png'], - video: ['gif', 'mp4', '3gp'], - document: ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'csv'], - audio: ['aac', 'mp4', 'm4a', 'mp3', 'amr', 'ogg'], -}; const ImageUpload = ({ disabled, invokeUploadFileMessage, invokeSendUploadMessage }) => { + const { message: appMessage } = App.useApp(); + // const setComplexMsg = useConversationStore(state => state.setComplexMsg); // const complexMsg = useConversationStore(state => state.complexMsg); const [fileObj, setFileObj] = useState(); const beforeUpload = async (file) => { + const fileTypeSupport = Object.keys(whatsappSupportFileTypes).find((msgType) => whatsappSupportFileTypes[msgType].types.includes(file.type)); + if (isEmpty(fileTypeSupport)) { + appMessage.warning('不支持的文件格式'); + return false; + } + const waFile = whatsappSupportFileTypes[fileTypeSupport]; + if (file.size > waFile.size) { + appMessage.warning('超过大小限制'); + return false; + } // 使用 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 msgObj = { - type: type, + type: fileTypeSupport, name: file.name, // status: 'loading', data: { uri: previewSrc, dataUri: dataUri, link: dataUri, width: '100%', height: 150, loading: 0.01 }, @@ -66,7 +61,7 @@ const ImageUpload = ({ disabled, invokeUploadFileMessage, invokeSendUploadMessag showUploadList: false, beforeUpload, maxCount: 1, - accept: 'audio/aac, audio/mp4, audio/mpeg, audio/amr, audio/ogg,image/jpeg, image/png,video/mp4, video/3gp,image/webp,text/plain, application/pdf, application/vnd.ms-powerpoint, application/msword, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.openxmlformats-officedocument.presentationml.presentation, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' + accept: Object.values(whatsappSupportFileTypes).reduce((r, c) => r.concat(c.types), []).join(',') }; return ( { websocket.sendMessage({ ...contentToSend, opi_sn: userId, coli_sn: currentConversation.coli_sn }); }; - const { message } = App.useApp(); + const { message: appMessage } = App.useApp(); const [pastedUploading, setPastedUploading] = useState(false); - const readPasted = async (file, rename = false) => { + const readPasted = async (file) => { + const fileTypeSupport = Object.keys(whatsappSupportFileTypes).find((msgType) => whatsappSupportFileTypes[msgType].types.includes(file.type)); + if (isEmpty(fileTypeSupport)) { + appMessage.warning('不支持的粘贴内容'); + return false; + } + const waFile = whatsappSupportFileTypes[fileTypeSupport]; + if (file.size > waFile.size) { + appMessage.warning('超过大小限制'); + return false; + } // 使用 FileReader 读取文件对象 const reader = new FileReader(); const suffix = file.name.slice(file.name.lastIndexOf('.') + 1); 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, + type: fileTypeSupport, name: file.name, uploadStatus: 'loading', data: { dataUri: dataUri, link: dataUri, width: '100%', height: 150, loading: 0.01 }, @@ -156,7 +165,7 @@ const InputComposer = ({ mobile }) => { let tmpfile = null; if (!items || items.length === 0) { // 当前浏览器不支持本地 - message.warning('当前浏览器不支持本地'); + appMessage.warning('当前浏览器不支持本地'); return; } let isNotFile = true; @@ -173,11 +182,14 @@ const InputComposer = ({ mobile }) => { return; } if (!tmpfile) { - message.warning('没有读取到粘贴内容'); + appMessage.warning('没有读取到粘贴内容'); return; } const shouldRename = tmpfile.type.indexOf('image') !== -1; const _tmpFile = await readPasted(tmpfile, shouldRename); + if (_tmpFile === false) { + return; + } setComplexMsg(_tmpFile.msgData); setPastedUploading(true); const { file_url } = await postUploadFileItem(tmpfile, _tmpFile.newName);