fix: allow add or paste more images
This commit is contained in:
@@ -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 {
|
|
||||||
uid: `${Date.now()}-${Math.random()}-${idx}`,
|
|
||||||
name,
|
|
||||||
status: 'done',
|
|
||||||
originFileObj: file,
|
|
||||||
} as any;
|
|
||||||
});
|
|
||||||
|
|
||||||
// 受控更新并遵守最大数量限制
|
const entry = {
|
||||||
setFileList((prev) => {
|
uid: `${Date.now()}-${Math.random()}`,
|
||||||
const merged = [...prev, ...newList];
|
name,
|
||||||
return merged.slice(0, 9);
|
status: 'done',
|
||||||
});
|
originFileObj: pastedImage,
|
||||||
|
} as any;
|
||||||
|
|
||||||
message.success(`已添加${pastedImages.length}张剪贴板图片`);
|
// 仅保留一张:新图直接替换旧图
|
||||||
|
setFileList([entry]);
|
||||||
|
message.success('已添加剪贴板图片');
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -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} />
|
||||||
|
|||||||
Reference in New Issue
Block a user