You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
85 lines
3.1 KiB
JavaScript
85 lines
3.1 KiB
JavaScript
import { Upload, Button, message } from 'antd';
|
|
import { FileAddOutlined } from '@ant-design/icons';
|
|
import { v4 as uuid } from 'uuid';
|
|
import { API_HOST } from '@/config';
|
|
import useConversationStore from '@/stores/ConversationStore';
|
|
|
|
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
|
|
*
|
|
* 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 fileTypesExt = {
|
|
sticker: ['webp'],
|
|
photo: ['jpeg', 'jpg', 'png'],
|
|
video: ['gif', 'mp4', '3gp'],
|
|
document: ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'csv'],
|
|
audio: ['aac', 'mp4', 'm4a', 'mp3', 'amr', 'ogg'],
|
|
};
|
|
|
|
const ImageUpload = ({ disabled, invokeUploadFileMessage, invokeSendUploadMessage }) => {
|
|
|
|
// const setComplexMsg = useConversationStore(state => state.setComplexMsg);
|
|
// const complexMsg = useConversationStore(state => state.complexMsg);
|
|
|
|
const beforeUpload = async (file) => {
|
|
// 使用 FileReader 读取文件对象
|
|
const reader = new FileReader();
|
|
// 读取完毕后获取结果
|
|
reader.onload = (event) => {
|
|
const previewSrc = event.target.result;
|
|
const suffix = file.name.slice(file.name.lastIndexOf('.')+1);
|
|
const type = Object.keys(fileTypesExt).find((type) => fileTypesExt[type].includes(suffix));
|
|
const name = file.name;
|
|
const rename = Date.now() + '.' + suffix;
|
|
const dataUri = aliOSSHost + file.name;
|
|
const msgObj = {
|
|
type: type,
|
|
name: file.name,
|
|
// status: 'loading',
|
|
data: { uri: previewSrc, dataUri: dataUri, link: dataUri, width: '100%', height: 150, loading: 0.01 },
|
|
id: uuid(),
|
|
};
|
|
file.msgData = msgObj;
|
|
invokeUploadFileMessage(msgObj);
|
|
};
|
|
// 把文件对象作为一个 dataURL 读入
|
|
reader.readAsDataURL(file);
|
|
return file;
|
|
};
|
|
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,
|
|
beforeUpload,
|
|
maxCount: 1,
|
|
};
|
|
return (
|
|
<Upload
|
|
{...uploadProps}
|
|
onChange={({file}) => {
|
|
if (file.status === 'done') {
|
|
invokeSendUploadMessage(file.msgData);
|
|
}
|
|
if (file.status === 'error') {
|
|
message.error(`添加失败`);
|
|
}
|
|
}}
|
|
>
|
|
<Button key={'addPic'} type='text' disabled={disabled} icon={<FileAddOutlined />} size={'middle'} className='text-primary rounded-none' />
|
|
</Upload>
|
|
);
|
|
};
|
|
export default ImageUpload;
|