fix: 支持粘贴图片
This commit is contained in:
@@ -130,6 +130,49 @@ function handleRemove(file: UploadFile) {
|
|||||||
fileList.value.splice(index, 1);
|
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> {
|
function fileToBase64(file: File): Promise<string> {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
const reader = new FileReader();
|
const reader = new FileReader();
|
||||||
@@ -356,10 +399,14 @@ defineExpose({
|
|||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
fetchTokens();
|
fetchTokens();
|
||||||
fetchModels();
|
fetchModels();
|
||||||
|
// Add paste event listener for reference images
|
||||||
|
document.addEventListener('paste', handlePaste);
|
||||||
});
|
});
|
||||||
|
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
stopPolling();
|
stopPolling();
|
||||||
|
// Remove paste event listener
|
||||||
|
document.removeEventListener('paste', handlePaste);
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@@ -474,7 +521,7 @@ onUnmounted(() => {
|
|||||||
</div>
|
</div>
|
||||||
</el-upload>
|
</el-upload>
|
||||||
<div class="text-xs text-gray-400 mt-2 flex justify-between items-center flex-wrap gap-2">
|
<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" />
|
<el-checkbox v-model="compressImage" label="压缩图片" size="small" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user