|
|
|
|
@ -1,9 +1,5 @@
|
|
|
|
|
import { useState } from 'react';
|
|
|
|
|
import { Upload, Button, message } from 'antd';
|
|
|
|
|
import {
|
|
|
|
|
FileImageOutlined,
|
|
|
|
|
} from '@ant-design/icons';
|
|
|
|
|
import useConversationStore from '@/stores/ConversationStore';
|
|
|
|
|
import { FileAddOutlined } from '@ant-design/icons';
|
|
|
|
|
import { v4 as uuid } from 'uuid';
|
|
|
|
|
import { API_HOST } from '@/config';
|
|
|
|
|
|
|
|
|
|
@ -17,31 +13,17 @@ const aliOSSHost = `https://haina-sale-system.oss-cn-shenzhen.aliyuncs.com/WAMed
|
|
|
|
|
*
|
|
|
|
|
* 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 fileTypes = {
|
|
|
|
|
'photo': ['ani','bmp','gif','ico','jpe','jpeg','jpg','pcx','png','psd','tga','tif','tiff','wmf'],
|
|
|
|
|
'sticker': ['webp'],
|
|
|
|
|
'photo': ['ani','bmp','ico','jpe','jpeg','jpg','pcx','png','psd','tga','tif','tiff','wmf'],
|
|
|
|
|
'audio': ['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': ['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'],
|
|
|
|
|
'video': ['gif','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 ImageUpload = ({ disabled }) => {
|
|
|
|
|
// 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 [uploading, setUploading] = useState(false);
|
|
|
|
|
const ImageUpload = ({ disabled, invokeUploadFileMessage, invokeSendUploadMessage }) => {
|
|
|
|
|
|
|
|
|
|
const handleSendImage = (file) => {
|
|
|
|
|
const msgObj = {
|
|
|
|
|
type: file.type, // 'photo',
|
|
|
|
|
name: file.name,
|
|
|
|
|
status: 'loading',
|
|
|
|
|
data: { uri: file.previewSrc, dataUri: file.dataUri, width: '100%', height: 150 },
|
|
|
|
|
id: uuid(),
|
|
|
|
|
};
|
|
|
|
|
setComplexMsg(msgObj);
|
|
|
|
|
};
|
|
|
|
|
const beforeUpload = async (file) => {
|
|
|
|
|
// 使用 FileReader 读取文件对象
|
|
|
|
|
const reader = new FileReader();
|
|
|
|
|
@ -53,7 +35,15 @@ const ImageUpload = ({ disabled }) => {
|
|
|
|
|
const name = file.name;
|
|
|
|
|
// const filename = Date.now() + suffix;
|
|
|
|
|
const dataUri = aliOSSHost + file.name;
|
|
|
|
|
handleSendImage({ previewSrc, dataUri, type, suffix, name});
|
|
|
|
|
const msgObj = {
|
|
|
|
|
type: type,
|
|
|
|
|
name: name,
|
|
|
|
|
// status: 'loading',
|
|
|
|
|
data: { uri: previewSrc, dataUri: dataUri, width: '100%', height: 150, loading: 0.01 },
|
|
|
|
|
id: uuid(),
|
|
|
|
|
};
|
|
|
|
|
file.msgData = msgObj;
|
|
|
|
|
invokeUploadFileMessage(msgObj);
|
|
|
|
|
};
|
|
|
|
|
// 把文件对象作为一个 dataURL 读入
|
|
|
|
|
reader.readAsDataURL(file);
|
|
|
|
|
@ -62,41 +52,27 @@ const ImageUpload = ({ disabled }) => {
|
|
|
|
|
const uploadProps = {
|
|
|
|
|
name: 'file',
|
|
|
|
|
action: `${API_HOST}/WAFileUpload`,
|
|
|
|
|
// action: 'https://run.mocky.io/v3/435e224c-44fb-4773-9faf-380c5e6a2188', // test:
|
|
|
|
|
headers: {
|
|
|
|
|
'X-Requested-With': null
|
|
|
|
|
},
|
|
|
|
|
showUploadList: false,
|
|
|
|
|
// onChange: handleChange,
|
|
|
|
|
// onRemove,
|
|
|
|
|
// data: getExtraData,
|
|
|
|
|
beforeUpload,
|
|
|
|
|
maxCount: 1,
|
|
|
|
|
};
|
|
|
|
|
return (
|
|
|
|
|
<Upload
|
|
|
|
|
{...uploadProps}
|
|
|
|
|
onChange={(info) => {
|
|
|
|
|
// 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);
|
|
|
|
|
setComplexMsg({...complexMsg, status: info.file.status})
|
|
|
|
|
onChange={({file}) => {
|
|
|
|
|
if (file.status === 'done') {
|
|
|
|
|
invokeSendUploadMessage(file.msgData);
|
|
|
|
|
}
|
|
|
|
|
if (info.file.status === 'done') {
|
|
|
|
|
// 会闪烁
|
|
|
|
|
setComplexMsg({
|
|
|
|
|
...complexMsg,
|
|
|
|
|
status: info.file.status,
|
|
|
|
|
data: { ...complexMsg.data, uri: complexMsg.data.dataUri, [`${complexMsg.type}URL`]: complexMsg.data.dataUri },
|
|
|
|
|
});
|
|
|
|
|
// message.success(`${info.file.name} file uploaded successfully`);
|
|
|
|
|
} else if (info.file.status === 'error') {
|
|
|
|
|
if (file.status === 'error') {
|
|
|
|
|
message.error(`添加失败`);
|
|
|
|
|
setComplexMsg({ ...complexMsg, status: info.file.status, data: { ...complexMsg.data, uri: '', [`${complexMsg.type}URL`]: '' } });
|
|
|
|
|
}
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<Button key={'addPic'} type='text' disabled={disabled} icon={<FileImageOutlined />} size={'middle'} className='text-primary rounded-none' />
|
|
|
|
|
<Button key={'addPic'} type='text' disabled={disabled} icon={<FileAddOutlined />} size={'middle'} className='text-primary rounded-none' />
|
|
|
|
|
</Upload>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
Lei OT
2 years ago