fix: allow add or paste more images

This commit is contained in:
2025-10-30 17:58:36 +08:00
parent 18ee8c1ac2
commit 1f138f5097

View File

@@ -17,6 +17,19 @@ const InputPanel: React.FC<InputPanelProps> = ({ onResult, showUpload = true, mo
const [fileList, setFileList] = React.useState<any[]>([]); const [fileList, setFileList] = React.useState<any[]>([]);
const [loading, setLoading] = React.useState(false); const [loading, setLoading] = React.useState(false);
// 统一显示短文件名image.{ext}
const getImageExt = (file: any): string => {
const type = file?.type || '';
if (typeof type === 'string' && type.startsWith('image/')) {
const sub = type.split('/')[1] || 'png';
return sub.toLowerCase();
}
const name = file?.name || '';
const dot = name.lastIndexOf('.');
const ext = dot >= 0 ? name.slice(dot + 1) : '';
return (ext || 'png').toLowerCase();
};
const send = async () => { const send = async () => {
const trimmed = value.trim(); const trimmed = value.trim();
const hasText = trimmed.length > 0; const hasText = trimmed.length > 0;
@@ -114,39 +127,35 @@ const InputPanel: React.FC<InputPanelProps> = ({ onResult, showUpload = true, mo
const items = e.clipboardData?.items; const items = e.clipboardData?.items;
if (!items || items.length === 0) return; if (!items || items.length === 0) return;
const pastedImages: File[] = []; let pastedImage: File | null = null;
for (let i = 0; i < items.length; i++) { for (let i = 0; i < items.length; i++) {
const item = items[i]; const item = items[i];
if (item.kind === 'file') { if (item.kind === 'file') {
const file = item.getAsFile(); const file = item.getAsFile();
if (file && file.type.startsWith('image/')) { if (file && file.type.startsWith('image/')) {
pastedImages.push(file); pastedImage = file;
break; // 只取第一张
} }
} }
} }
if (pastedImages.length > 0) { if (pastedImage) {
// 避免图片以奇怪文本式粘贴进输入框 // 避免图片内容以文本式粘贴进输入框
e.preventDefault(); e.preventDefault();
const newList = pastedImages.map((file, idx) => { const ext = getImageExt(pastedImage);
const ext = (file.type.split('/')[1] || 'png').toLowerCase(); const name = `image.${ext}`;
const name = file.name && file.name.trim().length > 0 ? file.name : `pasted-image-${Date.now()}-${idx}.${ext}`;
return { const entry = {
uid: `${Date.now()}-${Math.random()}-${idx}`, uid: `${Date.now()}-${Math.random()}`,
name, name,
status: 'done', status: 'done',
originFileObj: file, originFileObj: pastedImage,
} as any; } as any;
});
// 受控更新并遵守最大数量限制 // 仅保留一张:新图直接替换旧图
setFileList((prev) => { setFileList([entry]);
const merged = [...prev, ...newList]; message.success('已添加剪贴板图片');
return merged.slice(0, 9);
});
message.success(`已添加${pastedImages.length}张剪贴板图片`);
} }
}; };
@@ -172,11 +181,24 @@ const InputPanel: React.FC<InputPanelProps> = ({ onResult, showUpload = true, mo
{showUpload && ( {showUpload && (
<Upload <Upload
accept="image/*" accept="image/*"
multiple={false}
beforeUpload={() => false} beforeUpload={() => false}
fileList={fileList} fileList={fileList}
onChange={({ fileList }) => setFileList(fileList as any)} onChange={({ file, fileList }) => {
maxCount={9} // 只保留最新一个,并重命名为 image.{ext}
showUploadList={{ showPreviewIcon: false }} if (fileList.length === 0) {
setFileList([]);
return;
}
const latest = fileList[fileList.length - 1] as any;
const raw = latest.originFileObj || file; // UploadFile 或原始 File
const ext = getImageExt(raw);
const renamed = { ...latest, name: `image.${ext}` };
setFileList([renamed]);
}}
onRemove={() => { setFileList([]); return true; }}
maxCount={1}
showUploadList={{ showPreviewIcon: false, showRemoveIcon: true }}
disabled={loading} disabled={loading}
> >
<Button type="text" icon={<PictureOutlined />} disabled={loading} /> <Button type="text" icon={<PictureOutlined />} disabled={loading} />