fix: 支持粘贴图片

This commit is contained in:
Gsh
2026-01-17 17:38:54 +08:00
parent 6b6ddcf550
commit 0c8f01c00a

View File

@@ -130,6 +130,49 @@ function handleRemove(file: UploadFile) {
fileList.value.splice(index, 1);
}
// Handle paste event for reference images
function handlePaste(event: ClipboardEvent) {
const items = event.clipboardData?.items;
if (!items) return;
for (const item of items) {
if (item.type.startsWith('image/')) {
event.preventDefault();
if (fileList.value.length >= 2) {
ElMessage.warning('最多只能上传2张参考图');
return;
}
const file = item.getAsFile();
if (!file) return;
// Check file size
const isLt5M = file.size / 1024 / 1024 < 5;
if (!isLt5M) {
ElMessage.error('图片大小不能超过 5MB!');
return;
}
// Create object URL for preview
const url = URL.createObjectURL(file);
const filename = `pasted-image-${Date.now()}.${file.type.split('/')[1] || 'png'}`;
const uploadFile: UploadUserFile = {
name: filename,
url,
raw: file,
uid: Date.now(),
status: 'ready',
};
fileList.value.push(uploadFile);
ElMessage.success('已粘贴图片');
break; // Only handle the first image
}
}
}
function fileToBase64(file: File): Promise<string> {
return new Promise((resolve, reject) => {
const reader = new FileReader();
@@ -356,10 +399,14 @@ defineExpose({
onMounted(() => {
fetchTokens();
fetchModels();
// Add paste event listener for reference images
document.addEventListener('paste', handlePaste);
});
onUnmounted(() => {
stopPolling();
// Remove paste event listener
document.removeEventListener('paste', handlePaste);
});
</script>
@@ -474,7 +521,7 @@ onUnmounted(() => {
</div>
</el-upload>
<div class="text-xs text-gray-400 mt-2 flex justify-between items-center flex-wrap gap-2">
<span>最多2张< 5MB (支持 JPG/PNG/WEBP)</span>
<span>最多2张< 5MB (支持 JPG/PNG/WEBP可粘贴)</span>
<el-checkbox v-model="compressImage" label="压缩图片" size="small" />
</div>
</div>