191 lines
7.0 KiB
HTML
191 lines
7.0 KiB
HTML
<!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: Arial, sans-serif;
|
|
max-width: 800px;
|
|
margin: 50px auto;
|
|
padding: 20px;
|
|
}
|
|
.test-section {
|
|
margin: 20px 0;
|
|
padding: 20px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 5px;
|
|
}
|
|
.test-section h3 {
|
|
margin-top: 0;
|
|
color: #333;
|
|
}
|
|
button {
|
|
padding: 10px 20px;
|
|
background: #409eff;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
margin: 5px;
|
|
}
|
|
button:hover {
|
|
background: #66b1ff;
|
|
}
|
|
.result {
|
|
margin-top: 10px;
|
|
padding: 10px;
|
|
background: #f5f7fa;
|
|
border-radius: 4px;
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
}
|
|
.success {
|
|
background: #f0f9ff;
|
|
border-left: 4px solid #67c23a;
|
|
}
|
|
.error {
|
|
background: #fef0f0;
|
|
border-left: 4px solid #f56c6c;
|
|
}
|
|
input[type="file"] {
|
|
margin: 10px 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>图片上传接口测试工具</h1>
|
|
<p>用于测试 <code>/api/file/upload</code> 接口是否正常工作</p>
|
|
|
|
<!-- 测试1: 检查接口配置 -->
|
|
<div class="test-section">
|
|
<h3>测试1: 检查上传配置</h3>
|
|
<p>测试接口: <code>GET /api/file/config</code></p>
|
|
<button onclick="testConfig()">测试配置接口</button>
|
|
<div id="config-result" class="result" style="display:none;"></div>
|
|
</div>
|
|
|
|
<!-- 测试2: 上传图片 -->
|
|
<div class="test-section">
|
|
<h3>测试2: 上传图片</h3>
|
|
<p>测试接口: <code>POST /api/file/upload</code></p>
|
|
<input type="file" id="fileInput" accept="image/*">
|
|
<br>
|
|
<button onclick="testUpload()">上传图片</button>
|
|
<div id="upload-result" class="result" style="display:none;"></div>
|
|
</div>
|
|
|
|
<!-- 测试3: 检查后端是否运行 -->
|
|
<div class="test-section">
|
|
<h3>测试3: 检查后端状态</h3>
|
|
<p>检查后端是否在 8089 端口运行</p>
|
|
<button onclick="testBackend()">检查后端</button>
|
|
<div id="backend-result" class="result" style="display:none;"></div>
|
|
</div>
|
|
|
|
<script>
|
|
const BASE_URL = 'http://localhost:8089';
|
|
|
|
// 测试配置接口
|
|
async function testConfig() {
|
|
const resultDiv = document.getElementById('config-result');
|
|
resultDiv.style.display = 'block';
|
|
resultDiv.className = 'result';
|
|
resultDiv.textContent = '正在测试...';
|
|
|
|
try {
|
|
const response = await fetch(`${BASE_URL}/api/file/config`);
|
|
const data = await response.json();
|
|
|
|
if (response.ok && data.code === 200) {
|
|
resultDiv.className = 'result success';
|
|
resultDiv.textContent = '✅ 配置接口正常\n\n' + JSON.stringify(data, null, 2);
|
|
} else {
|
|
resultDiv.className = 'result error';
|
|
resultDiv.textContent = '❌ 配置接口返回错误\n\n' + JSON.stringify(data, null, 2);
|
|
}
|
|
} catch (error) {
|
|
resultDiv.className = 'result error';
|
|
resultDiv.textContent = '❌ 请求失败\n\n错误信息: ' + error.message + '\n\n可能原因:\n1. 后端未启动\n2. 端口不是8089\n3. 跨域问题';
|
|
}
|
|
}
|
|
|
|
// 测试上传接口
|
|
async function testUpload() {
|
|
const fileInput = document.getElementById('fileInput');
|
|
const resultDiv = document.getElementById('upload-result');
|
|
|
|
if (!fileInput.files || fileInput.files.length === 0) {
|
|
alert('请先选择一张图片');
|
|
return;
|
|
}
|
|
|
|
const file = fileInput.files[0];
|
|
resultDiv.style.display = 'block';
|
|
resultDiv.className = 'result';
|
|
resultDiv.textContent = '正在上传...';
|
|
|
|
try {
|
|
const formData = new FormData();
|
|
formData.append('file', file);
|
|
|
|
const response = await fetch(`${BASE_URL}/api/file/upload`, {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (response.ok && data.code === 200) {
|
|
resultDiv.className = 'result success';
|
|
resultDiv.textContent = '✅ 上传成功\n\n' + JSON.stringify(data, null, 2);
|
|
|
|
// 显示图片
|
|
if (data.data && data.data.fileUrl) {
|
|
const img = document.createElement('img');
|
|
img.src = data.data.fileUrl;
|
|
img.style.maxWidth = '300px';
|
|
img.style.marginTop = '10px';
|
|
resultDiv.appendChild(document.createElement('br'));
|
|
resultDiv.appendChild(img);
|
|
}
|
|
} else {
|
|
resultDiv.className = 'result error';
|
|
resultDiv.textContent = '❌ 上传失败\n\n' + JSON.stringify(data, null, 2);
|
|
}
|
|
} catch (error) {
|
|
resultDiv.className = 'result error';
|
|
resultDiv.textContent = '❌ 上传失败\n\n错误信息: ' + error.message + '\n\n可能原因:\n1. 后端未启动\n2. 接口路径错误\n3. 文件参数名不匹配';
|
|
}
|
|
}
|
|
|
|
// 测试后端状态
|
|
async function testBackend() {
|
|
const resultDiv = document.getElementById('backend-result');
|
|
resultDiv.style.display = 'block';
|
|
resultDiv.className = 'result';
|
|
resultDiv.textContent = '正在检查...';
|
|
|
|
try {
|
|
const response = await fetch(`${BASE_URL}/api/file/config`, {
|
|
method: 'GET',
|
|
mode: 'cors'
|
|
});
|
|
|
|
if (response.ok) {
|
|
resultDiv.className = 'result success';
|
|
resultDiv.textContent = '✅ 后端运行正常\n\n端口: 8089\n状态: 运行中';
|
|
} else {
|
|
resultDiv.className = 'result error';
|
|
resultDiv.textContent = '❌ 后端响应异常\n\nHTTP状态码: ' + response.status;
|
|
}
|
|
} catch (error) {
|
|
resultDiv.className = 'result error';
|
|
resultDiv.textContent = '❌ 无法连接到后端\n\n错误信息: ' + error.message + '\n\n请检查:\n1. 后端是否已启动\n2. 端口是否为8089\n3. 防火墙设置';
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|