Viajero/Achievement_Inputing
3
0
Fork 0
Code Issues 2 Pull Requests 1 Actions Packages Projects Releases 13 Wiki Activity

修上传BUG

Browse Source
This commit is contained in:
DSQ
2026-03-12 20:27:32 +08:00
parent d69858434f
commit 6f1abc1681
2 changed files with 313 additions and 244 deletions
Download Patch File Download Diff File Expand all files Collapse all files

289
elastic/templates/elastic/upload.html
View File

@@ -42,22 +42,33 @@
.preview-box {flex: 1; text-align: center; }
.preview-box h3 {margin-top: 0;color: #334155; }
.preview-box img { max-width: 100%;max-height: 300px;border: 1px solid #e2e8f0;border-radius: 8px;object-fit: contain;}
.preview-list {display: grid;grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));gap: 12px;}
.preview-list {display: grid;grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));gap: 12px; margin-top: 20px;}
.preview-item {position: relative;}
.preview-item img {width: 100%;max-height: 220px;border: 1px solid #e2e8f0;border-radius: 8px;object-fit: contain;}
.preview-remove {position: absolute;top: 6px;right: 6px;border: none;border-radius: 999px;background: rgba(15,23,42,0.8);color: #fff;width: 24px;height: 24px;cursor: pointer;display: flex;align-items: center;justify-content: center;font-size: 14px;line-height: 1;}
.result-box {flex: 1;}
.result-box h3 { margin-top: 0; color: #334155;}
.form-controls { display: flex;gap: 8px;margin-bottom: 12px;flex-wrap: wrap;}
#kvForm {border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; max-height: 400px; overflow: auto;margin-bottom: 12px;background: #f8fafc;}
.form-header { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; margin-bottom: 8px; padding: 0 4px; font-weight: 600; color: #475569; font-size: 14px;}
.pending-item { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; margin-bottom: 24px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
.pending-item-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; border-bottom: 1px solid #f1f5f9; padding-bottom: 12px; }
.pending-item-title { font-weight: 600; color: #1e293b; font-size: 16px; }
.pending-item-body { display: flex; gap: 20px; }
.pending-item-preview { flex: 0 0 240px; }
.pending-item-preview img { width: 100%; border-radius: 8px; border: 1px solid #f1f5f9; }
.pending-item-edit { flex: 1; }
.pending-item-footer { margin-top: 16px; text-align: right; }
@media (max-width: 992px) {
.pending-item-body { flex-direction: column; }
.pending-item-preview { flex: 0 0 auto; }
}
.form-row {display: grid;grid-template-columns: 1fr 1fr auto;gap: 8px; margin-bottom: 6px; align-items: center;}
.form-row input {padding: 8px;border: 1px solid #cbd5e1;border-radius: 4px; width: 100%; box-sizing: border-box;}
#resultBox { width: 100%;min-height: 200px;font-family: ui-monospace, SFMono-Regular, Menlo, monospace;font-size: 14px; padding: 12px; border: 1px solid #e2e8f0;
border-radius: 8px; resize: vertical;box-sizing: border-box; }
.kv-form-container {border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; max-height: 400px; overflow: auto; margin-bottom: 12px; background: #f8fafc;}
.form-header { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; margin-bottom: 8px; padding: 0 4px; font-weight: 600; color: #475569; font-size: 14px;}
.result-textarea { width: 100%; min-height: 120px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; padding: 10px; border: 1px solid #e2e8f0; border-radius: 8px; resize: vertical; box-sizing: border-box; }
.status-message { padding: 10px; margin: 10px 0; border-radius: 6px; display: none; }
.status-message.success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.status-message.error { background-color: #f8d7da;color: #721c24; border: 1px solid #f5c6cb; }
.status-message.error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.action-buttons { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; }
.progress {position: relative; height: 12px; background: #e2e8f0; border-radius: 8px; overflow: hidden;}
.progress-bar {height: 100%; width: 0; background: linear-gradient(90deg, #4f46e5 0%, #60a5fa 100%); transition: width .2s ease;}
@@ -96,6 +107,7 @@
{% csrf_token %}
<input type="file" id="fileInput" name="file" accept="image/*,.pdf" multiple />
<span id="fileHint" class="muted"></span>
<div id="previewList" class="preview-list"></div>
<br>
<button type="submit" class="btn btn-primary">上传并识别</button>
</form>
@@ -107,19 +119,11 @@
</div>
<div class="preview-container">
<div class="preview-box">
<h3>图片预览</h3>
<div id="previewList" class="preview-list"></div>
</div>
<div class="result-box">
<h3>识别结果（可编辑）</h3>
<div class="form-controls">
<button id="addFieldBtn" class="btn btn-secondary" type="button">添加字段</button>
<button id="syncFromTextBtn" class="btn btn-secondary" type="button">从文本区刷新表单</button>
<h3>待处理文件列表</h3>
<div id="pendingItems" class="pending-list">
<!-- 这里将动态生成每个文件的预览和编辑区域 -->
</div>
<div id="kvForm"></div>
<textarea id="resultBox" placeholder="识别结果JSON将显示在这里"></textarea>
</div>
</div>
@@ -142,20 +146,17 @@ const uploadForm = document.getElementById('uploadForm');
const fileInput = document.getElementById('fileInput');
const fileHint = document.getElementById('fileHint');
const previewList = document.getElementById('previewList');
const resultBox = document.getElementById('resultBox');
const pendingItems = document.getElementById('pendingItems');
const uploadMsg = document.getElementById('uploadMsg');
const confirmBtn = document.getElementById('confirmBtn');
const clearBtn = document.getElementById('clearBtn');
const confirmMsg = document.getElementById('confirmMsg');
const kvForm = document.getElementById('kvForm');
const addFieldBtn = document.getElementById('addFieldBtn');
const syncFromTextBtn = document.getElementById('syncFromTextBtn');
const dropArea = document.getElementById('dropArea');
const progressWrap = document.getElementById('progressWrap');
const progressBar = document.getElementById('progressBar');
const progressText = document.getElementById('progressText');
let currentImageRel = [];
let currentItems = []; // 存储当前待处理的所有文件结果
let selectedFiles = [];
function setProgress(p, text){
@@ -251,10 +252,15 @@ function setPreviewList(urls) {
const idx = Number(item.dataset.index);
if (!Number.isNaN(idx)) {
selectedFiles.splice(idx, 1);
const urls = selectedFiles.map(f => URL.createObjectURL(f));
const urls = selectedFiles.map(f => {
if (f.name.toLowerCase().endsWith('.pdf')) {
return 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNlZjQ0NDQiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTQgMmgyYTIgMiAwIDAgMSAyIDJ2MTZhMiAyIDAgMCAxLTIgMmgtMTJhMiAyIDAgMCAxLTItMlY0YTIgMiAwIDAgMSAyLTJoMiIvPjxwYXRoIGQ9Ik0xNCAydjRjMCAxLjEgLjkgMiAyIDJoNCIvPjxwYXRoIGQ9Ik03IDloNSIvPjxwYXRoIGQ9Ik03IDEzaDUiLz48cGF0aCBkPSJNNyAxN2g4Ii8+PC9zdmc+';
}
return URL.createObjectURL(f);
});
setPreviewList(urls);
updateFileHint();
setTimeout(() => urls.forEach(u => URL.revokeObjectURL(u)), 0);
setTimeout(() => urls.forEach(u => { if (u.startsWith('blob:')) URL.revokeObjectURL(u); }), 0);
}
};
item.appendChild(img);
@@ -265,7 +271,7 @@ function setPreviewList(urls) {
function updateFileHint() {
const count = selectedFiles.length;
fileHint.textContent = count ? `已选择 ${count} 张` : '未选择文件';
fileHint.textContent = count ? `已选择 ${count} 个文件` : '未选择文件';
}
function addFiles(files) {
@@ -280,18 +286,13 @@ function addFiles(files) {
});
const urls = selectedFiles.map(f => {
if (f.name.toLowerCase().endsWith('.pdf')) {
// 使用一个简单的 SVG PDF 图标 Data URI
return 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNlZjQ0NDQiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTQgMmgyYTIgMiAwIDAgMSAyIDJ2MTZhMiAyIDAgMCAxLTIgMmgtMTJhMiAyIDAgMCAxLTItMlY0YTIgMiAwIDAgMSAyLTJoMiIvPjxwYXRoIGQ9Ik0xNCAydjRjMCAxLjEgLjkgMiAyIDJoNCIvPjxwYXRoIGQ9Ik03IDloNSIvPjxwYXRoIGQ9Ik03IDEzaDUiLz48cGF0aCBkPSJNNyAxN2g4Ii8+PC9zdmc+';
return 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNlZjQ0NDQiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTQgMmgyYTIgMiAwIDAgMSAyIDJ2MTZhMiAyIDAgMCAxLTIgMmgtMTJhMiAyIDAgMCAxLTItMlY0YTIgMiAwIDAgMSAyLTJoMiIvPjxwYXRoIGQ9Ik0xNCAydjRjMCAxLjEgLjkgMiAyIDJoNCIvPjxwYXRoIGQ9Ik03IDloNSIvPjxwYXRoIGQ9Ik03IDEzaDUiLz48cGF0aCBkPSJNNyAxN2g4Ii8+PC9zdmc+';
}
return URL.createObjectURL(f);
});
setPreviewList(urls);
updateFileHint();
setTimeout(() => {
urls.forEach(u => {
if (u.startsWith('blob:')) URL.revokeObjectURL(u);
});
}, 0);
setTimeout(() => urls.forEach(u => { if (u.startsWith('blob:')) URL.revokeObjectURL(u); }), 0);
}
fileInput.addEventListener('change', function(e) {
@@ -299,7 +300,7 @@ fileInput.addEventListener('change', function(e) {
fileInput.value = '';
});
function createRow(k = '', v = '') {
function createKvRow(k = '', v = '', onInput) {
const row = document.createElement('div');
row.className = 'form-row';
const keyInput = document.createElement('input');
@@ -314,93 +315,147 @@ function createRow(k = '', v = '') {
delBtn.type = 'button';
delBtn.className = 'btn btn-danger';
delBtn.textContent = '删除';
delBtn.onclick = () => {
if (kvForm.querySelectorAll('.form-row').length > 1) {
kvForm.removeChild(row);
const container = row.parentElement;
if (container.querySelectorAll('.form-row').length > 1) {
container.removeChild(row);
} else {
keyInput.value = '';
valInput.value = '';
}
syncTextarea();
if (onInput) onInput();
};
keyInput.oninput = syncTextarea;
valInput.oninput = syncTextarea;
keyInput.oninput = onInput;
valInput.oninput = onInput;
row.appendChild(keyInput);
row.appendChild(valInput);
row.appendChild(delBtn);
return row;
}
function renderFormFromObject(obj) {
kvForm.innerHTML = `
<div class="form-header">
<div>字段名</div>
<div>字段值</div>
<div>操作</div>
</div>
`;
Object.keys(obj || {}).forEach(k => {
kvForm.appendChild(createRow(k, obj[k]));
});
if (kvForm.children.length <= 1) kvForm.appendChild(createRow());
syncTextarea();
}
function renderPendingItems(items) {
pendingItems.innerHTML = '';
currentItems = items;
function objectFromForm() {
const obj = {};
Array.from(kvForm.children).forEach(row => {
if (row.classList.contains('form-header')) return;
const [kInput, vInput] = row.querySelectorAll('input');
const k = (kInput.value || '').trim();
if (!k) return;
const raw = vInput.value;
try {
obj[k] = JSON.parse(raw);
} catch (_) {
obj[k] = raw;
items.forEach((item, index) => {
const itemEl = document.createElement('div');
itemEl.className = 'pending-item';
const header = document.createElement('div');
header.className = 'pending-item-header';
header.innerHTML = `<span class="pending-item-title">${index + 1}. ${item.name}</span>`;
const removeBtn = document.createElement('button');
removeBtn.className = 'btn btn-danger';
removeBtn.textContent = '忽略此项';
removeBtn.onclick = () => {
currentItems.splice(index, 1);
renderPendingItems(currentItems);
};
header.appendChild(removeBtn);
const body = document.createElement('div');
body.className = 'pending-item-body';
const preview = document.createElement('div');
preview.className = 'pending-item-preview';
const mainImg = document.createElement('img');
mainImg.src = item.image_urls[0];
preview.appendChild(mainImg);
if (item.image_urls.length > 1) {
const hint = document.createElement('p');
hint.className = 'muted';
hint.style.textAlign = 'center';
hint.textContent = `共 ${item.image_urls.length} 页`;
preview.appendChild(hint);
}
const edit = document.createElement('div');
edit.className = 'pending-item-edit';
const controls = document.createElement('div');
controls.className = 'form-controls';
const addBtn = document.createElement('button');
addBtn.className = 'btn btn-secondary';
addBtn.textContent = '添加字段';
const syncBtn = document.createElement('button');
syncBtn.className = 'btn btn-secondary';
syncBtn.textContent = '刷新表单';
controls.appendChild(addBtn);
controls.appendChild(syncBtn);
const kvForm = document.createElement('div');
kvForm.className = 'kv-form-container';
kvForm.innerHTML = '<div class="form-header"><div>字段名</div><div>字段值</div><div>操作</div></div>';
const textarea = document.createElement('textarea');
textarea.className = 'result-textarea';
const syncData = () => {
const obj = {};
kvForm.querySelectorAll('.form-row').forEach(row => {
const inputs = row.querySelectorAll('input');
const k = inputs[0].value.trim();
if (!k) return;
try { obj[k] = JSON.parse(inputs[1].value); } catch(e) { obj[k] = inputs[1].value; }
});
item.data = obj;
textarea.value = JSON.stringify(obj, null, 2);
};
Object.entries(item.data).forEach(([k, v]) => {
kvForm.appendChild(createKvRow(k, v, syncData));
});
if (kvForm.querySelectorAll('.form-row').length === 0) {
kvForm.appendChild(createKvRow('', '', syncData));
}
addBtn.onclick = () => {
kvForm.appendChild(createKvRow('', '', syncData));
syncData();
};
syncBtn.onclick = () => {
try {
const obj = JSON.parse(textarea.value);
kvForm.innerHTML = '<div class="form-header"><div>字段名</div><div>字段值</div><div>操作</div></div>';
Object.entries(obj).forEach(([k, v]) => kvForm.appendChild(createKvRow(k, v, syncData)));
item.data = obj;
} catch(e) { alert('JSON格式错误'); }
};
textarea.value = JSON.stringify(item.data, null, 2);
textarea.oninput = () => { item.data = JSON.parse(textarea.value); };
edit.appendChild(controls);
edit.appendChild(kvForm);
edit.appendChild(textarea);
body.appendChild(preview);
body.appendChild(edit);
itemEl.appendChild(header);
itemEl.appendChild(body);
pendingItems.appendChild(itemEl);
});
return obj;
confirmBtn.disabled = items.length === 0;
}
function syncTextarea() {
const obj = objectFromForm();
resultBox.value = JSON.stringify(obj, null, 2);
}
addFieldBtn.addEventListener('click', () => {
kvForm.appendChild(createRow());
syncTextarea();
});
syncFromTextBtn.addEventListener('click', () => {
try {
const obj = JSON.parse(resultBox.value || '{}');
renderFormFromObject(obj);
uploadMsg.textContent = '已从文本区刷新表单';
uploadMsg.className = 'status-message success';
uploadMsg.style.display = 'block';
setTimeout(() => {
uploadMsg.style.display = 'none';
}, 2000);
} catch (e) {
uploadMsg.textContent = '文本区不是有效JSON';
uploadMsg.className = 'status-message error';
uploadMsg.style.display = 'block';
}
});
uploadForm.addEventListener('submit', async (e) => {
e.preventDefault();
uploadMsg.textContent = '';
confirmMsg.textContent = '';
confirmBtn.disabled = true;
resultBox.value = '';
currentImageRel = [];
previewList.innerHTML = '';
pendingItems.innerHTML = '';
currentItems = [];
const files = Array.from(selectedFiles || []).filter(f => f && (f.type.startsWith('image/') || f.name.toLowerCase().endsWith('.pdf')));
if (!files.length) {
uploadMsg.textContent = '请选择图片或PDF文件';
if (!selectedFiles.length) {
uploadMsg.textContent = '请选择文件';
uploadMsg.className = 'status-message error';
uploadMsg.style.display = 'block';
return;
@@ -409,10 +464,10 @@ uploadForm.addEventListener('submit', async (e) => {
showProgress();
setProgress(5, '预处理中');
const formData = new FormData();
for (let i = 0; i < files.length; i++) {
const file = files[i];
for (let i = 0; i < selectedFiles.length; i++) {
const file = selectedFiles[i];
if (file.type.startsWith('image/')) {
setProgress(5 + Math.round((i/files.length)*45), '转换图片');
setProgress(5 + Math.round((i/selectedFiles.length)*45), '转换图片');
try {
const jpegFile = await convertToJpeg(file);
formData.append('file', jpegFile);
@@ -420,7 +475,6 @@ uploadForm.addEventListener('submit', async (e) => {
formData.append('file', file);
}
} else {
// PDF 直接添加
formData.append('file', file);
}
}
@@ -431,7 +485,8 @@ uploadForm.addEventListener('submit', async (e) => {
const timer = setInterval(() => {
prog = Math.min(95, prog + 1);
setProgress(prog, '识别中');
}, 120);
}, 200);
const resp = await fetch('/elastic/upload/', {
method: 'POST',
credentials: 'same-origin',
@@ -447,11 +502,8 @@ uploadForm.addEventListener('submit', async (e) => {
uploadMsg.textContent = data.message || '识别成功';
uploadMsg.className = 'status-message success';
uploadMsg.style.display = 'block';
const urls = data.image_urls || (data.image_url ? [data.image_url] : []);
setPreviewList(urls);
renderFormFromObject(data.data || {});
currentImageRel = data.images || (data.image ? [data.image] : []);
confirmBtn.disabled = false;
renderPendingItems(data.items || []);
setTimeout(hideProgress, 800);
} catch (e) {
uploadMsg.textContent = e.message || '发生错误';
@@ -462,9 +514,14 @@ uploadForm.addEventListener('submit', async (e) => {
});
confirmBtn.addEventListener('click', async () => {
confirmMsg.textContent = '';
confirmMsg.textContent = '正在录入...';
try {
const edited = objectFromForm();
const payload = {
items: currentItems.map(it => ({
data: it.data,
image: it.images
}))
};
const resp = await fetch('/elastic/confirm/', {
method: 'POST',
credentials: 'same-origin',
@@ -472,7 +529,7 @@ confirmBtn.addEventListener('click', async () => {
'Content-Type': 'application/json',
'X-CSRFToken': getCookie('csrftoken') || ''
},
body: JSON.stringify({ data: edited, image: currentImageRel })
body: JSON.stringify(payload)
});
const data = await resp.json();
if (!resp.ok || data.status !== 'success') {
@@ -480,6 +537,12 @@ confirmBtn.addEventListener('click', async () => {
}
confirmMsg.textContent = data.message || '录入成功';
confirmMsg.style.color = '#179957';
// 录入成功后清空待处理列表
pendingItems.innerHTML = '';
currentItems = [];
selectedFiles = [];
updateFileHint();
confirmBtn.disabled = true;
} catch (e) {
confirmMsg.textContent = e.message || '发生错误';
confirmMsg.style.color = '#d14343';
@@ -489,13 +552,11 @@ confirmBtn.addEventListener('click', async () => {
clearBtn.addEventListener('click', () => {
fileInput.value = '';
previewList.innerHTML = '';
resultBox.value = '';
kvForm.innerHTML = '';
kvForm.appendChild(createRow()); // 保留一个空行
pendingItems.innerHTML = '';
uploadMsg.textContent = '';
confirmMsg.textContent = '';
confirmBtn.disabled = true;
currentImageRel = [];
currentItems = [];
selectedFiles = [];
updateFileHint();
});