Haina
/
Global-sales
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

上传文件

Browse Source
dev/chat
Lei OT 2 years ago
parent a20dd314cf
commit af419072ac
4 changed files with 15 additions and 67 deletions
Show Stats Download Patch File Download Diff File

4
src/actions/CommonActions.js
Unescape Escape View File

@ -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;
};

4
src/stores/ConversationStore.js
Unescape Escape View File

@ -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);

71
src/views/Conversations/Components/Input/MediaUpload.jsx
Unescape Escape View File

@ -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 }) => {
<Upload
{...uploadProps}
onChange={(info) => {
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: ''} })
}
}}
>

3
src/views/Conversations/Components/InputComposer.jsx
Unescape Escape View File

@ -108,11 +108,12 @@ const InputComposer = () => {
{complexMsg.id && (
<Flex justify='space-between' className='reply-to bg-gray-100 p-1 rounded-none text-slate-500'>
<div className='pl-2 pr-1 py-1'>
{complexMsg.type === 'photo' && <Image width={100} src={complexMsg.data.uri} />}
{(complexMsg.type === 'photo' && complexMsg.data.uri) && <Image width={100} src={complexMsg.data.uri} />}
{complexMsg.type === 'video' && <FileOutlined className=' text-red-400' />}
{complexMsg.type !== 'photo' && <span className='px-1'>{complexMsg.name}</span>}
{complexMsg.status === 'loading' && <LoadingOutlined className='px-1' />}
{complexMsg.status === 'done' && <CheckCircleOutlined className='px-1 text-primary' />}
{complexMsg.status === 'error' && <><CloseCircleOutlined className='px-1 text-red-400' /> <span>添加失败</span> </>}
</div>
<Button type='text' title='删除' className=' rounded-none text-slate-500' icon={<CloseCircleOutlined />} size={'middle'} onClick={() => setComplexMsg({})} />
</Flex>

Write Preview
Loading…
Cancel
Save