fix: 支持粘贴图片
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user