512 lines
17 KiB
HTML
512 lines
17 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>curl命令使用教程 - 文件传输服务</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
min-height: 100vh;
|
||
color: #333;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.container {
|
||
max-width: 900px;
|
||
margin: 0 auto;
|
||
padding: 2rem 1rem;
|
||
}
|
||
|
||
.header {
|
||
background: rgba(255, 255, 255, 0.95);
|
||
border-radius: 12px;
|
||
padding: 2rem;
|
||
margin-bottom: 2rem;
|
||
text-align: center;
|
||
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.header h1 {
|
||
color: #3b82f6;
|
||
margin-bottom: 0.5rem;
|
||
font-size: 2rem;
|
||
}
|
||
|
||
.header p {
|
||
color: #666;
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
.section {
|
||
background: rgba(255, 255, 255, 0.95);
|
||
border-radius: 12px;
|
||
padding: 2rem;
|
||
margin-bottom: 2rem;
|
||
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.section h2 {
|
||
color: #1f2937;
|
||
margin-bottom: 1rem;
|
||
padding-bottom: 0.5rem;
|
||
border-bottom: 2px solid #e5e7eb;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.code-block {
|
||
background: #1f2937;
|
||
color: #f8f9fa;
|
||
padding: 1rem;
|
||
border-radius: 8px;
|
||
margin: 1rem 0;
|
||
position: relative;
|
||
overflow-x: auto;
|
||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.code-block pre {
|
||
margin: 0;
|
||
white-space: pre-wrap;
|
||
word-break: break-all;
|
||
}
|
||
|
||
.copy-btn {
|
||
position: absolute;
|
||
top: 0.5rem;
|
||
right: 0.5rem;
|
||
background: #3b82f6;
|
||
color: white;
|
||
border: none;
|
||
padding: 0.25rem 0.5rem;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
font-size: 0.8rem;
|
||
transition: background 0.2s;
|
||
}
|
||
|
||
.copy-btn:hover {
|
||
background: #2563eb;
|
||
}
|
||
|
||
.example {
|
||
background: #f3f4f6;
|
||
border-left: 4px solid #10b981;
|
||
padding: 1rem;
|
||
margin: 1rem 0;
|
||
border-radius: 0 8px 8px 0;
|
||
}
|
||
|
||
.example-title {
|
||
font-weight: 600;
|
||
color: #10b981;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.tip {
|
||
background: #fef3c7;
|
||
border-left: 4px solid #f59e0b;
|
||
padding: 1rem;
|
||
margin: 1rem 0;
|
||
border-radius: 0 8px 8px 0;
|
||
}
|
||
|
||
.tip-title {
|
||
font-weight: 600;
|
||
color: #d97706;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.response-example {
|
||
background: #ecfdf5;
|
||
border: 1px solid #10b981;
|
||
padding: 1rem;
|
||
border-radius: 8px;
|
||
margin-top: 0.5rem;
|
||
}
|
||
|
||
.response-title {
|
||
font-weight: 600;
|
||
color: #10b981;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.back-link {
|
||
display: inline-block;
|
||
background: #3b82f6;
|
||
color: white;
|
||
text-decoration: none;
|
||
padding: 0.75rem 1.5rem;
|
||
border-radius: 8px;
|
||
margin-top: 2rem;
|
||
transition: background 0.2s;
|
||
}
|
||
|
||
.back-link:hover {
|
||
background: #2563eb;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.header h1 {
|
||
font-size: 1.5rem;
|
||
}
|
||
|
||
.code-block {
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.copy-btn {
|
||
font-size: 0.7rem;
|
||
padding: 0.2rem 0.4rem;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<div class="header">
|
||
<h1>📡 curl命令使用教程</h1>
|
||
<p>无需安装任何工具，使用系统自带的curl命令即可操作文件传输服务</p>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2>📤 上传文件</h2>
|
||
<p>使用curl上传任意文件，获取分享码：</p>
|
||
|
||
<div class="code-block">
|
||
<button class="copy-btn" onclick="copyCode(this)">复制</button>
|
||
<pre>curl -X POST -F "file=@文件路径" http://localhost:8000/api/upload</pre>
|
||
</div>
|
||
|
||
<div class="example">
|
||
<div class="example-title">📝 示例：</div>
|
||
<div class="code-block">
|
||
<button class="copy-btn" onclick="copyCode(this)">复制</button>
|
||
<pre># 上传图片
|
||
curl -X POST -F "file=@photo.jpg" http://localhost:8000/api/upload
|
||
|
||
# 上传文档
|
||
curl -X POST -F "file=@document.pdf" http://localhost:8000/api/upload
|
||
|
||
# 上传任意文件
|
||
curl -X POST -F "file=@/path/to/your/file.txt" http://localhost:8000/api/upload</pre>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="response-example">
|
||
<div class="response-title">✅ 成功响应示例：</div>
|
||
<div class="code-block">
|
||
<pre>{
|
||
"code": "AB12CD34",
|
||
"expires_at": "2024-01-01T12:15:00",
|
||
"download_url": "/api/download/AB12CD34"
|
||
}</pre>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tip">
|
||
<div class="tip-title">💡 提示：</div>
|
||
<ul>
|
||
<li>文件路径支持绝对路径和相对路径</li>
|
||
<li>最大支持100MB文件</li>
|
||
<li>分享码为8位大写字母+数字组合</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2>📝 分享文本</h2>
|
||
<p>直接分享文本内容，无需创建文件。提供多种简化方式：</p>
|
||
|
||
<h3>✨ 方式1: 超级简单（推荐）</h3>
|
||
<div class="code-block">
|
||
<button class="copy-btn" onclick="copyCode(this)">复制</button>
|
||
<pre>curl -X POST --data "你的文本内容" http://localhost:8000/api/text</pre>
|
||
</div>
|
||
|
||
<div class="example">
|
||
<div class="example-title">📝 示例：</div>
|
||
<div class="code-block">
|
||
<button class="copy-btn" onclick="copyCode(this)">复制</button>
|
||
<pre># 分享简单文本 ⭐ 最简单
|
||
curl -X POST --data "Hello World!" http://localhost:8000/api/text
|
||
|
||
# 分享多行文本
|
||
curl -X POST --data "第一行
|
||
第二行
|
||
第三行" http://localhost:8000/api/text
|
||
|
||
# 从文件分享
|
||
curl -X POST --data @myfile.txt http://localhost:8000/api/text
|
||
|
||
# 通过管道分享
|
||
echo "Hello from pipeline!" | curl -X POST --data @- http://localhost:8000/api/text</pre>
|
||
</div>
|
||
</div>
|
||
|
||
<h3>🔧 方式2: 表单方式（可指定文件名）</h3>
|
||
<div class="code-block">
|
||
<button class="copy-btn" onclick="copyCode(this)">复制</button>
|
||
<pre>curl -X POST -F "content=文本内容" -F "filename=文件名.txt" http://localhost:8000/api/share-text-form</pre>
|
||
</div>
|
||
|
||
<div class="example">
|
||
<div class="example-title">📝 示例：</div>
|
||
<div class="code-block">
|
||
<button class="copy-btn" onclick="copyCode(this)">复制</button>
|
||
<pre># 指定文件名
|
||
curl -X POST -F "content=Hello World!" -F "filename=hello.txt" http://localhost:8000/api/share-text-form
|
||
|
||
# 分享代码
|
||
curl -X POST -F "content=#!/bin/bash
|
||
echo Hello" -F "filename=script.sh" http://localhost:8000/api/share-text-form</pre>
|
||
</div>
|
||
</div>
|
||
|
||
<h3>📋 方式3: JSON方式（兼容性）</h3>
|
||
<div class="code-block">
|
||
<button class="copy-btn" onclick="copyCode(this)">复制</button>
|
||
<pre>curl -X POST -H "Content-Type: application/json" \
|
||
-d '{"content":"文本内容","filename":"文件名.txt"}' \
|
||
http://localhost:8000/api/share-text</pre>
|
||
</div>
|
||
|
||
<div class="tip">
|
||
<div class="tip-title">💡 推荐使用顺序：</div>
|
||
<ul>
|
||
<li><strong>✨ 超级简单方式</strong> - 最短命令，适合快速分享</li>
|
||
<li><strong>🔧 表单方式</strong> - 需要自定义文件名时使用</li>
|
||
<li><strong>📋 JSON方式</strong> - 需要更复杂控制时使用</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2>⬇️ 下载文件</h2>
|
||
<p>使用分享码下载文件到本地：</p>
|
||
|
||
<div class="code-block">
|
||
<button class="copy-btn" onclick="copyCode(this)">复制</button>
|
||
<pre>curl -O -J http://localhost:8000/api/download/分享码</pre>
|
||
</div>
|
||
|
||
<div class="example">
|
||
<div class="example-title">📝 示例：</div>
|
||
<div class="code-block">
|
||
<button class="copy-btn" onclick="copyCode(this)">复制</button>
|
||
<pre># 下载文件（保持原文件名）
|
||
curl -O -J http://localhost:8000/api/download/AB12CD34
|
||
|
||
# 下载并指定文件名
|
||
curl -o myfile.pdf http://localhost:8000/api/download/AB12CD34
|
||
|
||
# 下载到指定目录
|
||
curl -o ~/Downloads/file.txt http://localhost:8000/api/download/AB12CD34</pre>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tip">
|
||
<div class="tip-title">💡 参数说明：</div>
|
||
<ul>
|
||
<li><code>-O</code>：保存文件，使用服务器端文件名</li>
|
||
<li><code>-J</code>：使用服务器提供的文件名</li>
|
||
<li><code>-o filename</code>：指定保存的文件名</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2>ℹ️ 查看文件信息</h2>
|
||
<p>在下载前查看文件的详细信息：</p>
|
||
|
||
<div class="code-block">
|
||
<button class="copy-btn" onclick="copyCode(this)">复制</button>
|
||
<pre>curl http://localhost:8000/api/info/分享码</pre>
|
||
</div>
|
||
|
||
<div class="example">
|
||
<div class="example-title">📝 示例：</div>
|
||
<div class="code-block">
|
||
<button class="copy-btn" onclick="copyCode(this)">复制</button>
|
||
<pre>curl http://localhost:8000/api/info/AB12CD34</pre>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="response-example">
|
||
<div class="response-title">✅ 响应示例：</div>
|
||
<div class="code-block">
|
||
<pre>{
|
||
"code": "AB12CD34",
|
||
"filename": "document.pdf",
|
||
"file_type": "application/pdf",
|
||
"size": 1048576,
|
||
"created_at": "2024-01-01T12:00:00",
|
||
"expires_at": "2024-01-01T12:15:00",
|
||
"is_expired": false
|
||
}</pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2>📊 列出所有分享</h2>
|
||
<p>查看当前所有有效的分享：</p>
|
||
|
||
<div class="code-block">
|
||
<button class="copy-btn" onclick="copyCode(this)">复制</button>
|
||
<pre>curl http://localhost:8000/api/shares</pre>
|
||
</div>
|
||
|
||
<div class="tip">
|
||
<div class="tip-title">💡 用途：</div>
|
||
<ul>
|
||
<li>查看所有分享的文件列表</li>
|
||
<li>检查文件过期时间</li>
|
||
<li>管理和清理分享</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2>🔧 高级用法</h2>
|
||
|
||
<h3>🎯 一键上传并获取分享码</h3>
|
||
<div class="code-block">
|
||
<button class="copy-btn" onclick="copyCode(this)">复制</button>
|
||
<pre># Linux/macOS 一行命令
|
||
curl -X POST -F "file=@myfile.txt" http://localhost:8000/api/upload | grep -o '"code":"[^"]*"' | cut -d'"' -f4
|
||
|
||
# 或使用jq解析JSON（需要安装jq）
|
||
curl -X POST -F "file=@myfile.txt" http://localhost:8000/api/upload | jq -r '.code'</pre>
|
||
</div>
|
||
|
||
<h3>📱 批量上传</h3>
|
||
<div class="code-block">
|
||
<button class="copy-btn" onclick="copyCode(this)">复制</button>
|
||
<pre># 批量上传当前目录所有txt文件
|
||
for file in *.txt; do
|
||
echo "上传: $file"
|
||
curl -X POST -F "file=@$file" http://localhost:8000/api/upload
|
||
echo -e "\n---"
|
||
done</pre>
|
||
</div>
|
||
|
||
<h3>🔄 下载重试</h3>
|
||
<div class="code-block">
|
||
<button class="copy-btn" onclick="copyCode(this)">复制</button>
|
||
<pre># 网络不稳定时使用重试
|
||
curl --retry 3 --retry-delay 1 -O -J http://localhost:8000/api/download/AB12CD34</pre>
|
||
</div>
|
||
|
||
<h3>📈 显示进度</h3>
|
||
<div class="code-block">
|
||
<button class="copy-btn" onclick="copyCode(this)">复制</button>
|
||
<pre># 上传时显示进度
|
||
curl --progress-bar -X POST -F "file=@largefile.zip" http://localhost:8000/api/upload
|
||
|
||
# 下载时显示进度
|
||
curl --progress-bar -O -J http://localhost:8000/api/download/AB12CD34</pre>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2>❌ 错误处理</h2>
|
||
|
||
<div class="example">
|
||
<div class="example-title">常见错误响应：</div>
|
||
<div class="code-block">
|
||
<pre># 404 - 分享码不存在
|
||
{
|
||
"detail": "分享码不存在"
|
||
}
|
||
|
||
# 410 - 分享已过期
|
||
{
|
||
"detail": "分享已过期"
|
||
}
|
||
|
||
# 413 - 文件太大
|
||
{
|
||
"detail": "文件太大，最大支持100MB"
|
||
}</pre>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tip">
|
||
<div class="tip-title">🔍 调试技巧：</div>
|
||
<ul>
|
||
<li>添加 <code>-v</code> 参数查看详细信息</li>
|
||
<li>添加 <code>-w "%{http_code}"</code> 查看HTTP状态码</li>
|
||
<li>添加 <code>-s</code> 参数静默模式（仅显示结果）</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2>🌐 远程服务器</h2>
|
||
<p>如果服务部署在远程服务器，只需替换URL中的地址：</p>
|
||
|
||
<div class="code-block">
|
||
<button class="copy-btn" onclick="copyCode(this)">复制</button>
|
||
<pre># 替换为您的服务器地址
|
||
curl -X POST -F "file=@myfile.txt" https://your-domain.com/api/upload
|
||
|
||
# 或使用IP地址
|
||
curl -X POST -F "file=@myfile.txt" http://192.168.1.100:8000/api/upload</pre>
|
||
</div>
|
||
</div>
|
||
|
||
<a href="/" class="back-link">← 返回Web界面</a>
|
||
</div>
|
||
|
||
<script>
|
||
function copyCode(button) {
|
||
const codeBlock = button.nextElementSibling;
|
||
const code = codeBlock.textContent;
|
||
|
||
navigator.clipboard.writeText(code).then(() => {
|
||
button.textContent = '已复制!';
|
||
button.style.background = '#10b981';
|
||
|
||
setTimeout(() => {
|
||
button.textContent = '复制';
|
||
button.style.background = '#3b82f6';
|
||
}, 2000);
|
||
}).catch(err => {
|
||
console.error('复制失败:', err);
|
||
button.textContent = '复制失败';
|
||
button.style.background = '#ef4444';
|
||
|
||
setTimeout(() => {
|
||
button.textContent = '复制';
|
||
button.style.background = '#3b82f6';
|
||
}, 2000);
|
||
});
|
||
}
|
||
|
||
// 自动替换localhost为当前域名
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
const currentHost = window.location.host;
|
||
const currentProtocol = window.location.protocol;
|
||
const baseUrl = `${currentProtocol}//${currentHost}`;
|
||
|
||
if (currentHost !== 'localhost:8000') {
|
||
const codeBlocks = document.querySelectorAll('.code-block pre');
|
||
codeBlocks.forEach(block => {
|
||
block.textContent = block.textContent.replace(/http:\/\/localhost:8000/g, baseUrl);
|
||
});
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |