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.
80 lines
3.4 KiB
JavaScript
80 lines
3.4 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';
|
|
|
|
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 fileTypes = {
|
|
'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': ['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, invokeUploadFileMessage, invokeSendUploadMessage }) => {
|
|
|
|
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(fileTypes).find((type) => fileTypes[type].includes(suffix));
|
|
const name = file.name;
|
|
// const filename = Date.now() + suffix;
|
|
const dataUri = aliOSSHost + file.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);
|
|
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;
|