You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
315 lines
12 KiB
315 lines
12 KiB
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>文件上传测试页面</title>
|
|
<style>
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
background-color: #f5f5f5;
|
|
}
|
|
.container {
|
|
background: white;
|
|
padding: 30px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
}
|
|
.form-group {
|
|
margin-bottom: 20px;
|
|
}
|
|
label {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
font-weight: 500;
|
|
color: #333;
|
|
}
|
|
input, select, textarea {
|
|
width: 100%;
|
|
padding: 10px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
box-sizing: border-box;
|
|
}
|
|
textarea {
|
|
min-height: 80px;
|
|
resize: vertical;
|
|
}
|
|
.file-upload-area {
|
|
border: 2px dashed #ddd;
|
|
border-radius: 4px;
|
|
padding: 20px;
|
|
text-align: center;
|
|
transition: border-color 0.3s;
|
|
}
|
|
.file-upload-area:hover {
|
|
border-color: #409eff;
|
|
}
|
|
.file-info {
|
|
margin-top: 10px;
|
|
padding: 10px;
|
|
background: #f0f9ff;
|
|
border: 1px solid #b3d8ff;
|
|
border-radius: 4px;
|
|
color: #409eff;
|
|
}
|
|
.btn {
|
|
padding: 10px 20px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
margin-right: 10px;
|
|
}
|
|
.btn-primary {
|
|
background: #409eff;
|
|
color: white;
|
|
}
|
|
.btn-primary:hover {
|
|
background: #66b1ff;
|
|
}
|
|
.btn-primary:disabled {
|
|
background: #c0c4cc;
|
|
cursor: not-allowed;
|
|
}
|
|
.log-area {
|
|
margin-top: 30px;
|
|
padding: 20px;
|
|
background: #f8f9fa;
|
|
border-radius: 4px;
|
|
border-left: 4px solid #409eff;
|
|
}
|
|
.log-content {
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 12px;
|
|
line-height: 1.4;
|
|
}
|
|
.success { color: #67c23a; }
|
|
.error { color: #f56c6c; }
|
|
.info { color: #409eff; }
|
|
.warning { color: #e6a23c; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>🔧 文件上传测试页面</h1>
|
|
<p>此页面用于测试修复后的文件上传功能，确保文件能正确上传到服务器。</p>
|
|
|
|
<form id="uploadForm">
|
|
<div class="form-group">
|
|
<label for="contractName">模板名称 <span style="color: red;">*</span></label>
|
|
<input type="text" id="contractName" placeholder="请输入模板名称" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="contractType">合同类型 <span style="color: red;">*</span></label>
|
|
<select id="contractType" required>
|
|
<option value="">请选择合同类型</option>
|
|
<option value="course">课程合同</option>
|
|
<option value="service">服务合同</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="fileInput">模板文件 <span style="color: red;">*</span></label>
|
|
<div class="file-upload-area">
|
|
<input type="file" id="fileInput" accept=".docx" required>
|
|
<div style="margin-top: 8px; font-size: 12px; color: #999;">
|
|
只支持 .docx 格式文件，文件大小不超过 10MB
|
|
</div>
|
|
<div id="fileInfo" class="file-info" style="display: none;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="remarks">备注</label>
|
|
<textarea id="remarks" placeholder="请输入备注信息"></textarea>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<button type="submit" class="btn btn-primary" id="uploadBtn">上传模板</button>
|
|
<button type="button" class="btn" onclick="clearForm()">清空表单</button>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="log-area">
|
|
<h3>📋 上传日志</h3>
|
|
<div id="logContent" class="log-content"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let selectedFile = null;
|
|
|
|
// 日志函数
|
|
function log(message, type = 'info') {
|
|
const logContent = document.getElementById('logContent');
|
|
const timestamp = new Date().toLocaleTimeString();
|
|
const logEntry = document.createElement('div');
|
|
logEntry.className = type;
|
|
logEntry.textContent = `[${timestamp}] ${message}`;
|
|
logContent.appendChild(logEntry);
|
|
logContent.scrollTop = logContent.scrollHeight;
|
|
console.log(`[${type.toUpperCase()}] ${message}`);
|
|
}
|
|
|
|
// 文件选择处理
|
|
document.getElementById('fileInput').addEventListener('change', function(event) {
|
|
const file = event.target.files[0];
|
|
const fileInfo = document.getElementById('fileInfo');
|
|
|
|
log('📁 文件选择事件触发', 'info');
|
|
|
|
if (!file) {
|
|
selectedFile = null;
|
|
fileInfo.style.display = 'none';
|
|
log('❌ 没有选择文件', 'warning');
|
|
return;
|
|
}
|
|
|
|
// 检查文件类型
|
|
if (!file.name.toLowerCase().endsWith('.docx')) {
|
|
alert('❌ 只支持上传 .docx 格式的文件！');
|
|
event.target.value = '';
|
|
selectedFile = null;
|
|
fileInfo.style.display = 'none';
|
|
log('❌ 文件格式不正确: ' + file.name, 'error');
|
|
return;
|
|
}
|
|
|
|
// 检查文件大小 (10MB)
|
|
if (file.size > 10 * 1024 * 1024) {
|
|
alert('❌ 文件大小不能超过 10MB！');
|
|
event.target.value = '';
|
|
selectedFile = null;
|
|
fileInfo.style.display = 'none';
|
|
log('❌ 文件过大: ' + (file.size / 1024 / 1024).toFixed(2) + 'MB', 'error');
|
|
return;
|
|
}
|
|
|
|
// 存储文件并显示信息
|
|
selectedFile = file;
|
|
fileInfo.innerHTML = `📄 ${file.name} (${(file.size / 1024 / 1024).toFixed(2)} MB)`;
|
|
fileInfo.style.display = 'block';
|
|
|
|
log(`✅ 文件选择成功: ${file.name} (${(file.size / 1024 / 1024).toFixed(2)} MB)`, 'success');
|
|
});
|
|
|
|
// 表单提交处理
|
|
document.getElementById('uploadForm').addEventListener('submit', async function(event) {
|
|
event.preventDefault();
|
|
|
|
log('🚀 开始上传流程...', 'info');
|
|
|
|
// 获取表单数据
|
|
const contractName = document.getElementById('contractName').value.trim();
|
|
const contractType = document.getElementById('contractType').value;
|
|
const remarks = document.getElementById('remarks').value.trim();
|
|
|
|
// 验证表单
|
|
if (!contractName) {
|
|
alert('❌ 请输入模板名称');
|
|
log('❌ 模板名称为空', 'error');
|
|
return;
|
|
}
|
|
|
|
if (!contractType) {
|
|
alert('❌ 请选择合同类型');
|
|
log('❌ 合同类型未选择', 'error');
|
|
return;
|
|
}
|
|
|
|
if (!selectedFile) {
|
|
alert('❌ 请选择模板文件');
|
|
log('❌ 没有选择文件', 'error');
|
|
return;
|
|
}
|
|
|
|
log('📋 表单验证通过', 'success');
|
|
log(` - 模板名称: ${contractName}`, 'info');
|
|
log(` - 合同类型: ${contractType}`, 'info');
|
|
log(` - 文件: ${selectedFile.name}`, 'info');
|
|
log(` - 备注: ${remarks || '无'}`, 'info');
|
|
|
|
// 显示上传状态
|
|
const uploadBtn = document.getElementById('uploadBtn');
|
|
const originalText = uploadBtn.textContent;
|
|
uploadBtn.textContent = '上传中...';
|
|
uploadBtn.disabled = true;
|
|
|
|
try {
|
|
// 构建FormData
|
|
const formData = new FormData();
|
|
formData.append('contract_name', contractName);
|
|
formData.append('contract_type', contractType);
|
|
formData.append('file', selectedFile);
|
|
formData.append('remarks', remarks);
|
|
|
|
log('📦 FormData构建完成', 'success');
|
|
|
|
// 验证FormData内容
|
|
log('🔍 FormData内容检查:', 'info');
|
|
for (let [key, value] of formData.entries()) {
|
|
if (value instanceof File) {
|
|
log(` ${key}: File(${value.name}, ${value.size} bytes)`, 'info');
|
|
} else {
|
|
log(` ${key}: ${value}`, 'info');
|
|
}
|
|
}
|
|
|
|
// 调用上传API
|
|
log('📡 发送API请求...', 'info');
|
|
const response = await fetch('/api/document_template/upload', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Authorization': 'Bearer ' + (localStorage.getItem('token') || sessionStorage.getItem('token') || '')
|
|
},
|
|
body: formData
|
|
});
|
|
|
|
log(`📡 API响应状态: ${response.status}`, response.ok ? 'success' : 'error');
|
|
|
|
if (response.ok) {
|
|
const result = await response.json();
|
|
log('✅ 上传成功: ' + JSON.stringify(result), 'success');
|
|
alert('✅ 模板上传成功！');
|
|
|
|
// 清空表单
|
|
clearForm();
|
|
|
|
} else {
|
|
const errorText = await response.text();
|
|
log(`❌ 上传失败: ${response.status} - ${errorText}`, 'error');
|
|
alert(`❌ 上传失败: ${response.status} - ${errorText}`);
|
|
}
|
|
|
|
} catch (error) {
|
|
log(`❌ 上传过程中发生错误: ${error.message}`, 'error');
|
|
alert(`❌ 上传失败: ${error.message}`);
|
|
} finally {
|
|
// 恢复按钮状态
|
|
uploadBtn.textContent = originalText;
|
|
uploadBtn.disabled = false;
|
|
}
|
|
});
|
|
|
|
// 清空表单
|
|
function clearForm() {
|
|
document.getElementById('uploadForm').reset();
|
|
selectedFile = null;
|
|
document.getElementById('fileInfo').style.display = 'none';
|
|
log('🧹 表单已清空', 'info');
|
|
}
|
|
|
|
// 页面加载完成
|
|
log('🚀 文件上传测试页面加载完成', 'success');
|
|
log('📝 请选择文件并测试上传功能', 'info');
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|