|
|
|
|
@ -16,46 +16,119 @@ import {
|
|
|
|
|
import useConversationStore from '@/stores/ConversationStore';
|
|
|
|
|
import { v4 as uuid } from 'uuid';
|
|
|
|
|
|
|
|
|
|
const props = {
|
|
|
|
|
name: 'file',
|
|
|
|
|
action: 'https://run.mocky.io/v3/435e224c-44fb-4773-9faf-380c5e6a2188',
|
|
|
|
|
headers: {
|
|
|
|
|
authorization: 'authorization-text',
|
|
|
|
|
},
|
|
|
|
|
showUploadList: false,
|
|
|
|
|
/**
|
|
|
|
|
* 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 fileTypes = {
|
|
|
|
|
'photo': ['ani','bmp','gif','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'],
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
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, invokeSendMessage }) => {
|
|
|
|
|
const { currentConversation, setComplexMsg } = useConversationStore();
|
|
|
|
|
const { currentConversation, setComplexMsg, complexMsg } = useConversationStore();
|
|
|
|
|
const [uploading, setUploading] = useState(false);
|
|
|
|
|
const [OSSData, setOSSData] = useState();
|
|
|
|
|
|
|
|
|
|
const handleSendImage = (src) => {
|
|
|
|
|
const handleSendImage = (file) => {
|
|
|
|
|
console.log(file);
|
|
|
|
|
const msgObj = {
|
|
|
|
|
type: 'photo',
|
|
|
|
|
data: { uri: src, width: '100%', height: 150, },
|
|
|
|
|
type: file.type, // 'photo',
|
|
|
|
|
name: file.name,
|
|
|
|
|
status: 'loading',
|
|
|
|
|
data: { uri: file.previewSrc, dataUri: file.dataUri, width: '100%', height: 150 },
|
|
|
|
|
id: uuid(),
|
|
|
|
|
};
|
|
|
|
|
setComplexMsg(msgObj);
|
|
|
|
|
// invokeSendMessage(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 = OSSData.dir + filename;
|
|
|
|
|
handleSendImage({ previewSrc, dataUri, type, suffix, name});
|
|
|
|
|
};
|
|
|
|
|
// 把文件对象作为一个 dataURL 读入
|
|
|
|
|
reader.readAsDataURL(file);
|
|
|
|
|
return file;
|
|
|
|
|
// return ret ? file : false;
|
|
|
|
|
|
|
|
|
|
// if (!OSSData) return false;
|
|
|
|
|
// const expire = Number(OSSData.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 = OSSData.dir + filename;
|
|
|
|
|
// return file;
|
|
|
|
|
};
|
|
|
|
|
const uploadProps = {
|
|
|
|
|
name: 'file',
|
|
|
|
|
action: 'https://run.mocky.io/v3/435e224c-44fb-4773-9faf-380c5e6a2188',
|
|
|
|
|
// action: OSSData?.host,
|
|
|
|
|
headers: {
|
|
|
|
|
authorization: 'authorization-text',
|
|
|
|
|
},
|
|
|
|
|
showUploadList: false,
|
|
|
|
|
// onChange: handleChange,
|
|
|
|
|
// onRemove,
|
|
|
|
|
// data: getExtraData,
|
|
|
|
|
beforeUpload,
|
|
|
|
|
};
|
|
|
|
|
return (
|
|
|
|
|
<Upload
|
|
|
|
|
{...props}
|
|
|
|
|
{...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})
|
|
|
|
|
}
|
|
|
|
|
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`);
|
|
|
|
|
// test: src
|
|
|
|
|
// handleSendImage('blob:https://web.whatsapp.com/bbe878fc-7bde-447f-aa28-a4b929621a50');
|
|
|
|
|
handleSendImage('https://images.chinahighlights.com//allpicture/2020/04/9330cd3c78a34c81afd3b1fb.jpg');
|
|
|
|
|
} else if (info.file.status === 'error') {
|
|
|
|
|
message.error(`图片添加失败`);
|
|
|
|
|
}
|
|
|
|
|
}}>
|
|
|
|
|
<Button key={'addPic'} type='text' loading={uploading} disabled={disabled} icon={<FileImageOutlined />} size={'middle'} className='text-primary rounded-none' />
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<Button key={'addPic'} type='text' disabled={disabled} icon={<FileImageOutlined />} size={'middle'} className='text-primary rounded-none' />
|
|
|
|
|
</Upload>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
Jimmy Liow
2 years ago