|
|
|
|
@ -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,26 +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, invokeSendMessage }) => {
|
|
|
|
|
const currentConversation = useConversationStore(state => state.currentConversation);
|
|
|
|
|
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 [OSSData, setOSSData] = useState();
|
|
|
|
|
|
|
|
|
|
const handleSendImage = (file) => {
|
|
|
|
|
console.log(file);
|
|
|
|
|
const msgObj = {
|
|
|
|
|
type: file.type, // 'photo',
|
|
|
|
|
name: file.name,
|
|
|
|
|
@ -60,50 +41,29 @@ const ImageUpload = ({ disabled, invokeSendMessage }) => {
|
|
|
|
|
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;
|
|
|
|
|
const dataUri = aliOSSHost + file.name;
|
|
|
|
|
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,
|
|
|
|
|
action: `${API_HOST}/WAFileUpload`,
|
|
|
|
|
headers: {
|
|
|
|
|
authorization: 'authorization-text',
|
|
|
|
|
'X-Requested-With': null
|
|
|
|
|
},
|
|
|
|
|
showUploadList: false,
|
|
|
|
|
// onChange: handleChange,
|
|
|
|
|
@ -115,19 +75,20 @@ const ImageUpload = ({ disabled, invokeSendMessage }) => {
|
|
|
|
|
<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: ''} })
|
|
|
|
|
}
|
|
|
|
|
}}
|
|
|
|
|
>
|
Jimmy Liow
2 years ago