Web 前端: HTML上传+转码界面 + FastAPI后端
- app.py: FastAPI 后端，POST /convert 接收文件上传并调用 vipsong.convert_file 转码 GET /download/<filename> 提供下载，GET /health 健康检查 文件名安全过滤保留扩展名，支持多格式输出(mp3/flac/wav/ogg/m4a) - templates/index.html: 纯HTML/CSS/JS单页应用，拖拽上传、格式选择、状态显示、下载链接 - .gitignore: 添加 static/uploads/、static/outputs/、音频输出文件过滤 - requirements.txt: 添加 fastapi、uvicorn、python-multipart 验证 MCP 可用性: - Baota MCP SystemInfo/SiteList/ServiceStatus 全部正常返回 - nginx+mysql+php-fpm-74/82/85 运行中，5个网站正常 - Web API 端对端测试: NCM→MP3/FLAC/OGG 均输出有效音频，错误处理返回 HTTP 400
This commit is contained in:
ypshidifu
BIN
Binary file not shown.
@@ -0,0 +1,88 @@
|
||||
#!/usr/bin/env python3
|
||||
"""vipsong Web — 音乐加密格式转码工具 (Web 版)。"""
|
||||
import os
|
||||
import shutil
|
||||
from pathlib import Path
|
||||
from fastapi import FastAPI, File, UploadFile, Form, HTTPException, BackgroundTasks
|
||||
from fastapi.responses import HTMLResponse, FileResponse, JSONResponse
|
||||
from fastapi.staticfiles import StaticFiles
|
||||
import vipsong
|
||||
|
||||
app = FastAPI(title="vipsong Web", description="音乐加密格式转码工具")
|
||||
|
||||
BASE_DIR = Path(__file__).parent
|
||||
UPLOAD_DIR = BASE_DIR / "static" / "uploads"
|
||||
OUTPUT_DIR = BASE_DIR / "static" / "outputs"
|
||||
UPLOAD_DIR.mkdir(parents=True, exist_ok=True)
|
||||
OUTPUT_DIR.mkdir(parents=True, exist_ok=True)
|
||||
|
||||
app.mount("/static", StaticFiles(directory=str(BASE_DIR / "static")), name="static")
|
||||
|
||||
SUPPORTED_EXTENSIONS = [".ncm", ".kgm", ".kgma", ".vpr"]
|
||||
SUPPORTED_FORMATS = ["mp3", "flac", "wav", "ogg", "m4a"]
|
||||
|
||||
|
||||
def is_supported(filename: str) -> bool:
|
||||
name = filename.lower()
|
||||
return any(name.endswith(ext) for ext in SUPPORTED_EXTENSIONS)
|
||||
|
||||
|
||||
@app.get("/", response_class=HTMLResponse)
|
||||
async def index():
|
||||
html = (BASE_DIR / "templates" / "index.html").read_text(encoding="utf-8")
|
||||
return HTMLResponse(html)
|
||||
|
||||
|
||||
@app.post("/convert")
|
||||
async def convert(
|
||||
file: UploadFile = File(...),
|
||||
format: str = Form("mp3"),
|
||||
):
|
||||
"""接收单文件上传，转码后返回下载链接。"""
|
||||
if not is_supported(file.filename):
|
||||
raise HTTPException(status_code=400, detail=f"不支持的文件格式: {file.filename}")
|
||||
|
||||
if format not in SUPPORTED_FORMATS:
|
||||
raise HTTPException(status_code=400, detail=f"不支持的输出格式: {format}")
|
||||
|
||||
# 清理文件名中的危险字符（保留扩展名中的点）
|
||||
safe_name = "".join(c for c in file.filename if c not in "/\\<>:\"|?*" and ord(c) > 31)
|
||||
upload_path = UPLOAD_DIR / safe_name
|
||||
with open(upload_path, "wb") as f:
|
||||
shutil.copyfileobj(file.file, f)
|
||||
|
||||
output_name = Path(safe_name).stem + "." + format
|
||||
output_path = OUTPUT_DIR / output_name
|
||||
|
||||
try:
|
||||
vipsong.convert_file(
|
||||
str(upload_path),
|
||||
format,
|
||||
delete_flag=False,
|
||||
output_path=str(output_path),
|
||||
)
|
||||
except Exception as e:
|
||||
raise HTTPException(status_code=500, detail=f"转码失败: {e}")
|
||||
finally:
|
||||
# 清理上传的临时文件
|
||||
if upload_path.exists():
|
||||
upload_path.unlink(missing_ok=True)
|
||||
|
||||
return {
|
||||
"original_name": file.filename,
|
||||
"output_name": output_name,
|
||||
"download_url": f"/download/{output_name}",
|
||||
}
|
||||
|
||||
|
||||
@app.get("/download/{filename}")
|
||||
async def download(filename: str):
|
||||
file_path = OUTPUT_DIR / filename
|
||||
if not file_path.exists():
|
||||
raise HTTPException(status_code=404, detail="文件不存在")
|
||||
return FileResponse(path=str(file_path), filename=filename)
|
||||
|
||||
|
||||
@app.get("/health")
|
||||
async def health():
|
||||
return {"status": "ok"}
|
||||
@@ -0,0 +1,215 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>vipsong Web — 音乐加密格式转码</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
background: #f5f6fa; color: #2d3436; min-height: 100vh; padding: 2rem;
|
||||
}
|
||||
.container { max-width: 720px; margin: 0 auto; }
|
||||
h1 { font-size: 1.5rem; margin-bottom: 0.5rem; }
|
||||
.subtitle { color: #636e72; font-size: 0.9rem; margin-bottom: 1.5rem; }
|
||||
|
||||
.upload-area {
|
||||
border: 2px dashed #dfe6e9; border-radius: 12px; padding: 2.5rem 1.5rem;
|
||||
text-align: center; cursor: pointer; transition: all .2s; background: #fff;
|
||||
}
|
||||
.upload-area:hover { border-color: #0984e3; background: #f8f9fa; }
|
||||
.upload-area.dragover { border-color: #0984e3; background: #e3f2fd; }
|
||||
.upload-area i { font-size: 2rem; color: #b2bec3; margin-bottom: 0.5rem; display: block; }
|
||||
.upload-area p { color: #636e72; font-size: 0.9rem; }
|
||||
|
||||
.format-selector {
|
||||
margin: 1.5rem 0; display: flex; align-items: center; gap: 1rem;
|
||||
}
|
||||
.format-selector label { font-weight: 600; color: #2d3436; }
|
||||
select {
|
||||
padding: 0.5rem 1rem; border: 1px solid #dfe6e9; border-radius: 8px;
|
||||
font-size: 0.9rem; background: #fff; cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-convert {
|
||||
display: block; width: 100%; padding: 0.8rem; margin-top: 1rem;
|
||||
background: #0984e3; color: #fff; border: none; border-radius: 8px;
|
||||
font-size: 1rem; font-weight: 600; cursor: pointer; transition: .2s;
|
||||
}
|
||||
.btn-convert:hover:not(:disabled) { background: #074c8a; }
|
||||
.btn-convert:disabled { background: #b2bec3; cursor: not-allowed; }
|
||||
|
||||
.file-list { margin-top: 1.5rem; }
|
||||
.file-item {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 0.8rem 1rem; border-radius: 8px; margin-bottom: 0.5rem;
|
||||
background: #fff; border: 1px solid #dfe6e9;
|
||||
}
|
||||
.file-info { display: flex; align-items: center; gap: 0.8rem; }
|
||||
.file-name { font-size: 0.9rem; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.file-status { font-size: 0.8rem; padding: 0.2rem 0.6rem; border-radius: 12px; }
|
||||
.status-pending { background: #f1f2f6; color: #636e72; }
|
||||
.status-upload { background: #fff3cd; color: #856404; }
|
||||
.status-convert { background: #fff3cd; color: #856404; }
|
||||
.status-done { background: #d4edda; color: #155724; }
|
||||
.status-error { background: #f8d7da; color: #721c24; }
|
||||
.btn-download { padding: 0.3rem 0.8rem; background: #00b894; color: #fff; border: none; border-radius: 6px; font-size: 0.8rem; cursor: pointer; }
|
||||
.btn-download:hover { background: #0984e3; }
|
||||
|
||||
.supported { margin-top: 1rem; font-size: 0.8rem; color: #636e72; }
|
||||
.supported span { color: #0984e3; font-weight: 600; }
|
||||
|
||||
@media (max-width: 480px) {
|
||||
body { padding: 1rem; }
|
||||
h1 { font-size: 1.2rem; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>vipsong — 音乐加密格式转码</h1>
|
||||
<p class="subtitle">支持 .ncm (网易云) / .kgm .vpr (酷狗) → mp3 / flac / wav / ogg / m4a</p>
|
||||
|
||||
<form id="uploadForm">
|
||||
<div class="upload-area" id="dropZone">
|
||||
<i>📁</i>
|
||||
<p>点击选择文件，或拖拽到这里</p>
|
||||
<input type="file" id="fileInput" multiple accept=".ncm,.kgm,.kgma,.vpr" style="display:none">
|
||||
</div>
|
||||
|
||||
<div class="format-selector">
|
||||
<label>输出格式:</label>
|
||||
<select id="formatSelect">
|
||||
<option value="mp3">MP3 (默认)</option>
|
||||
<option value="flac">FLAC (无损)</option>
|
||||
<option value="wav">WAV (无损)</option>
|
||||
<option value="ogg">OGG</option>
|
||||
<option value="m4a">M4A</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<button type="button" id="btnConvert" class="btn-convert" disabled>开始转码</button>
|
||||
</form>
|
||||
|
||||
<div class="file-list" id="fileList"></div>
|
||||
|
||||
<p class="supported">
|
||||
<span>支持格式:</span> .ncm / .kgm / .kgma / .vpr
|
||||
| <span>输出格式:</span> mp3 / flac / wav / ogg / m4a
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const dropZone = document.getElementById('dropZone');
|
||||
const fileInput = document.getElementById('fileInput');
|
||||
const formatSelect = document.getElementById('formatSelect');
|
||||
const btnConvert = document.getElementById('btnConvert');
|
||||
const fileList = document.getElementById('fileList');
|
||||
|
||||
let files = [];
|
||||
|
||||
// 点击上传区域选择文件
|
||||
dropZone.addEventListener('click', () => fileInput.click());
|
||||
|
||||
// 拖拽
|
||||
['dragenter', 'dragover'].forEach(evt => {
|
||||
dropZone.addEventListener(evt, e => {
|
||||
e.preventDefault(); e.stopPropagation();
|
||||
dropZone.classList.add('dragover');
|
||||
});
|
||||
});
|
||||
['dragleave', 'drop'].forEach(evt => {
|
||||
dropZone.addEventListener(evt, e => {
|
||||
e.preventDefault(); e.stopPropagation();
|
||||
dropZone.classList.remove('dragover');
|
||||
});
|
||||
});
|
||||
|
||||
// 拖拽放下
|
||||
dropZone.addEventListener('drop', e => {
|
||||
const dt = e.dataTransfer;
|
||||
handleFiles(dt.files);
|
||||
});
|
||||
|
||||
// 文件选择
|
||||
fileInput.addEventListener('change', e => {
|
||||
handleFiles(e.target.files);
|
||||
});
|
||||
|
||||
function handleFiles(fileListObj) {
|
||||
for (const f of fileListObj) {
|
||||
if (files.some(existing => existing.name === f.name)) continue;
|
||||
files.push(f);
|
||||
}
|
||||
renderFileList();
|
||||
}
|
||||
|
||||
function renderFileList() {
|
||||
fileList.innerHTML = '';
|
||||
if (files.length === 0) {
|
||||
btnConvert.disabled = true;
|
||||
return;
|
||||
}
|
||||
btnConvert.disabled = false;
|
||||
|
||||
files.forEach((f, idx) => {
|
||||
const item = document.createElement('div');
|
||||
item.className = 'file-item';
|
||||
item.innerHTML = `
|
||||
<div class="file-info">
|
||||
<span class="file-name">${f.name}</span>
|
||||
<span class="file-status status-pending" id="status-${idx}">等待</span>
|
||||
</div>
|
||||
<div id="actions-${idx}"></div>
|
||||
`;
|
||||
fileList.appendChild(item);
|
||||
});
|
||||
}
|
||||
|
||||
function setStatus(idx, text, cls) {
|
||||
const el = document.getElementById(`status-${idx}`);
|
||||
if (el) { el.textContent = text; el.className = 'file-status status-' + cls; }
|
||||
}
|
||||
|
||||
async function convertFile(file, idx) {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
formData.append('format', formatSelect.value);
|
||||
|
||||
setStatus(idx, '上传中', 'upload');
|
||||
|
||||
try {
|
||||
const resp = await fetch('/convert', { method: 'POST', body: formData });
|
||||
const data = await resp.json();
|
||||
|
||||
if (!resp.ok) throw new Error(data.detail || '转换失败');
|
||||
|
||||
setStatus(idx, '完成', 'done');
|
||||
const actions = document.getElementById(`actions-${idx}`);
|
||||
const a = document.createElement('a');
|
||||
a.href = data.download_url;
|
||||
a.textContent = '下载';
|
||||
a.className = 'btn-download';
|
||||
a.download = data.output_name;
|
||||
actions.appendChild(a);
|
||||
} catch (error) {
|
||||
setStatus(idx, '失败: ' + error.message, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
// 开始转码
|
||||
btnConvert.addEventListener('click', async () => {
|
||||
btnConvert.disabled = true;
|
||||
btnConvert.textContent = '转码中...';
|
||||
|
||||
for (let i = 0; i < files.length; i++) {
|
||||
await convertFile(files[i], i);
|
||||
}
|
||||
|
||||
btnConvert.disabled = false;
|
||||
btnConvert.textContent = '开始转码';
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user