diff --git a/src/actions/CommonActions.js b/src/actions/CommonActions.js index e499982..ce53d31 100644 --- a/src/actions/CommonActions.js +++ b/src/actions/CommonActions.js @@ -1,7 +1,3 @@ import { fetchJSON } from '@/utils/request'; import { API_HOST } from '@/config'; -export const getAliOSSToken = async () => { - const { errcode, result: data } = await fetchJSON(`${API_HOST}/ali-oss-token`); - return errcode !== 0 ? {} : data; -}; diff --git a/src/stores/ConversationStore.js b/src/stores/ConversationStore.js index 14d44ce..69a7a6e 100644 --- a/src/stores/ConversationStore.js +++ b/src/stores/ConversationStore.js @@ -3,7 +3,6 @@ import { RealTimeAPI } from '@/lib/realTimeAPI'; import { olog, isEmpty } from '@/utils/utils'; import { receivedMsgTypeMapped, handleNotification } from '@/lib/msgUtils'; import { fetchConversationsList, fetchTemplates, fetchMessages } from '@/actions/ConversationActions'; -import { getAliOSSToken } from '@/actions/CommonActions'; import { devtools } from 'zustand/middleware'; import { WS_URL } from '@/config'; @@ -299,9 +298,6 @@ export const useConversationStore = create( setInitial(true); - const AliOSSToken = await getAliOSSToken(); - setAliOSSToken(AliOSSToken); - for (const chatItem of conversationsList) { const msgData = await fetchMessages({ opisn: chatItem.opi_sn, whatsappid: chatItem.whatsapp_phone_number }); receivedMessageList(chatItem.sn, msgData); diff --git a/src/views/Conversations/Components/Input/MediaUpload.jsx b/src/views/Conversations/Components/Input/MediaUpload.jsx index b807ee7..ef91b27 100644 --- a/src/views/Conversations/Components/Input/MediaUpload.jsx +++ b/src/views/Conversations/Components/Input/MediaUpload.jsx @@ -1,21 +1,13 @@ -import { createContext, useContext, useEffect, useState } from 'react'; +import { useState } from 'react'; import { Upload, Button, message } from 'antd'; import { - SendOutlined, - MessageOutlined, - SmileOutlined, - PictureOutlined, FileImageOutlined, - CommentOutlined, - UploadOutlined, - CloudUploadOutlined, - FolderAddOutlined, - FilePdfOutlined, - CloseCircleOutlined, } from '@ant-design/icons'; import useConversationStore from '@/stores/ConversationStore'; import { v4 as uuid } from 'uuid'; +import { API_HOST } from '@/config'; +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 @@ -32,27 +24,15 @@ const fileTypes = { 'video': ['3g2','3gp','3gp2','3gpp','amr','amv','asf','avi','bdmv','bik','d2v','divx','drc','dsa','dsm','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 mockGetOSSData = () => ({ - dir: 'user-dir/', - expire: '1577811661', - host: '//haina-sale-system.oss-cn-shenzhen.aliyuncs.com', - accessId: 'LTAI5t8FBxiMYTd4tBSZzVy5', - // todo: - policy: 'eGl4aWhhaGFrdWt1ZGFkYQ==', - signature: 'ZGFob25nc2hhbw==', -}); - const ImageUpload = ({ disabled }) => { - const currentConversation = useConversationStore(state => state.currentConversation); + // const currentConversation = useConversationStore(state => state.currentConversation); const setComplexMsg = useConversationStore(state => state.setComplexMsg); const complexMsg = useConversationStore(state => state.complexMsg); - const aliOSSToken = useConversationStore(state => state.aliOSSToken); + // const aliOSSToken = useConversationStore(state => state.aliOSSToken); const [uploading, setUploading] = useState(false); - const [OSSData, setOSSData] = useState(); const handleSendImage = (file) => { - console.log(file); const msgObj = { type: file.type, // 'photo', name: file.name, @@ -63,53 +43,27 @@ const ImageUpload = ({ disabled }) => { setComplexMsg(msgObj); }; const beforeUpload = async (file) => { - console.log('beforeUpload', file); // 使用 FileReader 读取文件对象 const reader = new FileReader(); - // let ret = true; // 读取完毕后获取结果 reader.onload = (event) => { const previewSrc = event.target.result; - // test: src - const dataUri = `https://images.chinahighlights.com/allpicture/2020/04/9330cd3c78a34c81afd3b1fb.jpg`; - // const dataUri = `https://data.chinahighlights.com/video/CH-homepage-video.mp4`; const suffix = file.name.slice(file.name.lastIndexOf('.')+1); const type = Object.keys(fileTypes).find((type) => fileTypes[type].includes(suffix)); const name = file.name; - // ret = type === 'photo'; // const filename = Date.now() + suffix; - // file.url = aliOSSToken.dir + filename; + const dataUri = aliOSSHost + file.name; handleSendImage({ previewSrc, dataUri, type, suffix, name}); }; // 把文件对象作为一个 dataURL 读入 reader.readAsDataURL(file); return file; - // return ret ? file : false; - - // if (!aliOSSToken) return false; - // const expire = Number(aliOSSToken.expire) * 1000; - // if (expire < Date.now()) { - // // await init(); - // const result = await mockGetOSSData(); - // setOSSData(result); - // } - // const suffix = file.name.slice(file.name.lastIndexOf('.')); - // const filename = Date.now() + suffix; - // file.url = aliOSSToken.dir + filename; - // return file; }; - const getExtraData = (file) => ({ - key: file.url, - OSSAccessKeyId: aliOSSToken?.accessId, - policy: aliOSSToken?.policy, - Signature: aliOSSToken?.signature, - }); const uploadProps = { name: 'file', - action: 'https://run.mocky.io/v3/435e224c-44fb-4773-9faf-380c5e6a2188', // test: - // action: aliOSSToken?.host, + action: `${API_HOST}/WAFileUpload`, headers: { - authorization: 'authorization-text', + 'X-Requested-With': null }, showUploadList: false, // onChange: handleChange, @@ -121,19 +75,20 @@ const ImageUpload = ({ disabled }) => { { - console.log('fileList', info.fileList); + // console.log('fileList', info.fileList); setUploading(info.file.status === 'uploading'); setComplexMsg({...complexMsg, status: 'loading'}) if (info.file.status !== 'uploading') { - console.log(info.file, info.fileList); + // console.log(info.file, info.fileList); setComplexMsg({...complexMsg, status: info.file.status}) } if (info.file.status === 'done') { - // todo: 会闪烁 + // 会闪烁 setComplexMsg({...complexMsg, status: info.file.status, data: { ...complexMsg.data, uri: complexMsg.data.dataUri}}) // message.success(`${info.file.name} file uploaded successfully`); } else if (info.file.status === 'error') { - message.error(`图片添加失败`); + message.error(`添加失败`); + setComplexMsg({ ...complexMsg, status: info.file.status, data: { ...complexMsg.data, uri: ''} }) } }} > diff --git a/src/views/Conversations/Components/InputComposer.jsx b/src/views/Conversations/Components/InputComposer.jsx index 6c428f0..5f4c77a 100644 --- a/src/views/Conversations/Components/InputComposer.jsx +++ b/src/views/Conversations/Components/InputComposer.jsx @@ -108,11 +108,12 @@ const InputComposer = () => { {complexMsg.id && (
- {complexMsg.type === 'photo' && } + {(complexMsg.type === 'photo' && complexMsg.data.uri) && } {complexMsg.type === 'video' && } {complexMsg.type !== 'photo' && {complexMsg.name}} {complexMsg.status === 'loading' && } {complexMsg.status === 'done' && } + {complexMsg.status === 'error' && <> 添加失败 }