379 lines
14 KiB
HTML
379 lines
14 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>COS上传测试</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<div class="container mt-5">
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-8">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4>腾讯云COS上传测试</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<!-- 头像上传测试 -->
|
|
<div class="mb-4">
|
|
<h5>头像上传测试</h5>
|
|
<form id="avatarForm" enctype="multipart/form-data">
|
|
<div class="mb-3">
|
|
<input type="file" class="form-control" id="avatarFile" name="avatar" accept="image/*">
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">上传头像</button>
|
|
</form>
|
|
<div id="avatarResult" class="mt-3"></div>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<!-- 通用图片上传测试 -->
|
|
<div class="mb-4">
|
|
<h5>通用图片上传测试</h5>
|
|
<form id="imageForm" enctype="multipart/form-data">
|
|
<div class="mb-3">
|
|
<input type="file" class="form-control" id="imageFile" name="image" accept="image/*">
|
|
</div>
|
|
<div class="mb-3">
|
|
<select class="form-select" name="folder_type">
|
|
<option value="temp">临时文件</option>
|
|
<option value="product">商品图片</option>
|
|
<option value="review">评价图片</option>
|
|
</select>
|
|
</div>
|
|
<button type="submit" class="btn btn-success">上传图片</button>
|
|
</form>
|
|
<div id="imageResult" class="mt-3"></div>
|
|
</div>
|
|
|
|
<!-- 上传历史 -->
|
|
<div class="mb-4">
|
|
<h5>上传历史</h5>
|
|
<div id="uploadHistory"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script>
|
|
// 上传历史记录
|
|
let uploadHistory = [];
|
|
|
|
// 头像上传
|
|
document.getElementById('avatarForm').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
const formData = new FormData();
|
|
const fileInput = document.getElementById('avatarFile');
|
|
|
|
if (!fileInput.files[0]) {
|
|
showResult('avatarResult', false, '请选择文件');
|
|
return;
|
|
}
|
|
|
|
formData.append('avatar', fileInput.files[0]);
|
|
|
|
uploadFile('/upload/avatar', formData, 'avatarResult', '头像');
|
|
});
|
|
|
|
// 通用图片上传
|
|
document.getElementById('imageForm').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
const formData = new FormData(this);
|
|
const fileInput = document.getElementById('imageFile');
|
|
|
|
if (!fileInput.files[0]) {
|
|
showResult('imageResult', false, '请选择文件');
|
|
return;
|
|
}
|
|
|
|
uploadFile('/upload/image', formData, 'imageResult', '图片');
|
|
});
|
|
|
|
// 上传文件函数
|
|
function uploadFile(url, formData, resultId, fileType) {
|
|
const resultDiv = document.getElementById(resultId);
|
|
resultDiv.innerHTML = '<div class="alert alert-info">上传中...</div>';
|
|
|
|
fetch(url, {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
showResult(resultId, true, `${fileType}上传成功！`, data.url);
|
|
addToHistory(fileType, data.url, data.file_key);
|
|
} else {
|
|
showResult(resultId, false, data.error || `${fileType}上传失败`);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
showResult(resultId, false, `上传失败: ${error.message}`);
|
|
});
|
|
}
|
|
|
|
// 显示结果
|
|
function showResult(resultId, success, message, imageUrl = null) {
|
|
const resultDiv = document.getElementById(resultId);
|
|
const alertClass = success ? 'alert-success' : 'alert-danger';
|
|
|
|
let html = `<div class="alert ${alertClass}">${message}</div>`;
|
|
|
|
if (success && imageUrl) {
|
|
html += `
|
|
<div class="mt-2">
|
|
<img src="${imageUrl}" class="img-thumbnail" style="max-width: 200px;">
|
|
<p class="mt-2"><small>访问地址: <a href="${imageUrl}" target="_blank">${imageUrl}</a></small></p>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
resultDiv.innerHTML = html;
|
|
}
|
|
|
|
// 添加到历史记录
|
|
function addToHistory(type, url, fileKey) {
|
|
uploadHistory.unshift({
|
|
type: type,
|
|
url: url,
|
|
fileKey: fileKey,
|
|
time: new Date().toLocaleString()
|
|
});
|
|
|
|
updateHistoryDisplay();
|
|
}
|
|
|
|
// 更新历史记录显示
|
|
function updateHistoryDisplay() {
|
|
const historyDiv = document.getElementById('uploadHistory');
|
|
|
|
if (uploadHistory.length === 0) {
|
|
historyDiv.innerHTML = '<p class="text-muted">暂无上传记录</p>';
|
|
return;
|
|
}
|
|
|
|
let html = '<div class="list-group">';
|
|
|
|
uploadHistory.slice(0, 5).forEach(item => {
|
|
html += `
|
|
<div class="list-group-item">
|
|
<div class="d-flex justify-content-between align-items-start">
|
|
<div>
|
|
<h6 class="mb-1">${item.type}</h6>
|
|
<p class="mb-1"><small>${item.fileKey}</small></p>
|
|
<small class="text-muted">${item.time}</small>
|
|
</div>
|
|
<div>
|
|
<a href="${item.url}" target="_blank" class="btn btn-sm btn-outline-primary">查看</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
});
|
|
|
|
html += '</div>';
|
|
historyDiv.innerHTML = html;
|
|
}
|
|
|
|
// 初始化历史记录显示
|
|
updateHistoryDisplay();
|
|
</script>
|
|
</body>
|
|
</html>
|
|
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>COS上传测试</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<div class="container mt-5">
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-8">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4>腾讯云COS上传测试</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<!-- 头像上传测试 -->
|
|
<div class="mb-4">
|
|
<h5>头像上传测试</h5>
|
|
<form id="avatarForm" enctype="multipart/form-data">
|
|
<div class="mb-3">
|
|
<input type="file" class="form-control" id="avatarFile" name="avatar" accept="image/*">
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">上传头像</button>
|
|
</form>
|
|
<div id="avatarResult" class="mt-3"></div>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<!-- 通用图片上传测试 -->
|
|
<div class="mb-4">
|
|
<h5>通用图片上传测试</h5>
|
|
<form id="imageForm" enctype="multipart/form-data">
|
|
<div class="mb-3">
|
|
<input type="file" class="form-control" id="imageFile" name="image" accept="image/*">
|
|
</div>
|
|
<div class="mb-3">
|
|
<select class="form-select" name="folder_type">
|
|
<option value="temp">临时文件</option>
|
|
<option value="product">商品图片</option>
|
|
<option value="review">评价图片</option>
|
|
</select>
|
|
</div>
|
|
<button type="submit" class="btn btn-success">上传图片</button>
|
|
</form>
|
|
<div id="imageResult" class="mt-3"></div>
|
|
</div>
|
|
|
|
<!-- 上传历史 -->
|
|
<div class="mb-4">
|
|
<h5>上传历史</h5>
|
|
<div id="uploadHistory"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script>
|
|
// 上传历史记录
|
|
let uploadHistory = [];
|
|
|
|
// 头像上传
|
|
document.getElementById('avatarForm').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
const formData = new FormData();
|
|
const fileInput = document.getElementById('avatarFile');
|
|
|
|
if (!fileInput.files[0]) {
|
|
showResult('avatarResult', false, '请选择文件');
|
|
return;
|
|
}
|
|
|
|
formData.append('avatar', fileInput.files[0]);
|
|
|
|
uploadFile('/upload/avatar', formData, 'avatarResult', '头像');
|
|
});
|
|
|
|
// 通用图片上传
|
|
document.getElementById('imageForm').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
const formData = new FormData(this);
|
|
const fileInput = document.getElementById('imageFile');
|
|
|
|
if (!fileInput.files[0]) {
|
|
showResult('imageResult', false, '请选择文件');
|
|
return;
|
|
}
|
|
|
|
uploadFile('/upload/image', formData, 'imageResult', '图片');
|
|
});
|
|
|
|
// 上传文件函数
|
|
function uploadFile(url, formData, resultId, fileType) {
|
|
const resultDiv = document.getElementById(resultId);
|
|
resultDiv.innerHTML = '<div class="alert alert-info">上传中...</div>';
|
|
|
|
fetch(url, {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
showResult(resultId, true, `${fileType}上传成功！`, data.url);
|
|
addToHistory(fileType, data.url, data.file_key);
|
|
} else {
|
|
showResult(resultId, false, data.error || `${fileType}上传失败`);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
showResult(resultId, false, `上传失败: ${error.message}`);
|
|
});
|
|
}
|
|
|
|
// 显示结果
|
|
function showResult(resultId, success, message, imageUrl = null) {
|
|
const resultDiv = document.getElementById(resultId);
|
|
const alertClass = success ? 'alert-success' : 'alert-danger';
|
|
|
|
let html = `<div class="alert ${alertClass}">${message}</div>`;
|
|
|
|
if (success && imageUrl) {
|
|
html += `
|
|
<div class="mt-2">
|
|
<img src="${imageUrl}" class="img-thumbnail" style="max-width: 200px;">
|
|
<p class="mt-2"><small>访问地址: <a href="${imageUrl}" target="_blank">${imageUrl}</a></small></p>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
resultDiv.innerHTML = html;
|
|
}
|
|
|
|
// 添加到历史记录
|
|
function addToHistory(type, url, fileKey) {
|
|
uploadHistory.unshift({
|
|
type: type,
|
|
url: url,
|
|
fileKey: fileKey,
|
|
time: new Date().toLocaleString()
|
|
});
|
|
|
|
updateHistoryDisplay();
|
|
}
|
|
|
|
// 更新历史记录显示
|
|
function updateHistoryDisplay() {
|
|
const historyDiv = document.getElementById('uploadHistory');
|
|
|
|
if (uploadHistory.length === 0) {
|
|
historyDiv.innerHTML = '<p class="text-muted">暂无上传记录</p>';
|
|
return;
|
|
}
|
|
|
|
let html = '<div class="list-group">';
|
|
|
|
uploadHistory.slice(0, 5).forEach(item => {
|
|
html += `
|
|
<div class="list-group-item">
|
|
<div class="d-flex justify-content-between align-items-start">
|
|
<div>
|
|
<h6 class="mb-1">${item.type}</h6>
|
|
<p class="mb-1"><small>${item.fileKey}</small></p>
|
|
<small class="text-muted">${item.time}</small>
|
|
</div>
|
|
<div>
|
|
<a href="${item.url}" target="_blank" class="btn btn-sm btn-outline-primary">查看</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
});
|
|
|
|
html += '</div>';
|
|
historyDiv.innerHTML = html;
|
|
}
|
|
|
|
// 初始化历史记录显示
|
|
updateHistoryDisplay();
|
|
</script>
|
|
</body>
|
|
</html>
|