mirror of
https://github.com/NeteaseCloudMusicApiEnhanced/api-enhanced.git
synced 2026-08-12 17:10:37 +00:00
487 lines
16 KiB
HTML
487 lines
16 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<link rel="icon" href="docs/netease.png" />
|
||
<link rel="stylesheet" href="/static/shell.css" />
|
||
<title>云盘上传</title>
|
||
<style>
|
||
.mode-section {
|
||
margin-bottom: 1.5rem;
|
||
padding: 1rem;
|
||
background: var(--gray-2);
|
||
border: 1px solid var(--border);
|
||
}
|
||
.mode-section label {
|
||
display: block;
|
||
font-size: 0.875rem;
|
||
font-weight: 500;
|
||
color: var(--foreground);
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
.mode-options {
|
||
display: flex;
|
||
gap: 1rem;
|
||
flex-wrap: wrap;
|
||
}
|
||
.mode-option {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 0.5rem;
|
||
cursor: pointer;
|
||
}
|
||
.mode-option input[type="radio"] { margin-top: 3px; }
|
||
.mode-option-text {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.mode-option-title {
|
||
font-size: 0.875rem;
|
||
color: var(--foreground);
|
||
}
|
||
.mode-option-desc {
|
||
font-size: 0.75rem;
|
||
color: var(--muted-foreground);
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.upload-section { margin-bottom: 2rem; }
|
||
.upload-btn {
|
||
display: inline-block;
|
||
padding: 0.75rem 1.75rem;
|
||
background: var(--primary);
|
||
color: var(--primary-foreground);
|
||
font-family: var(--font-mono);
|
||
font-size: 0.9375rem;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: opacity var(--transition);
|
||
border: none;
|
||
}
|
||
.upload-btn:hover { opacity: 0.85; }
|
||
.upload-btn input[type="file"] { display: none; }
|
||
.upload-btn.disabled {
|
||
opacity: 0.4;
|
||
cursor: not-allowed;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.songs-list { list-style: none; }
|
||
.song-item {
|
||
padding: 0.75rem 1rem;
|
||
border-bottom: 1px solid var(--border);
|
||
font-size: 0.875rem;
|
||
color: var(--foreground);
|
||
font-family: var(--font-mono);
|
||
}
|
||
.song-item:last-child { border-bottom: none; }
|
||
.empty-state {
|
||
text-align: center;
|
||
padding: 2.5rem 1.25rem;
|
||
color: var(--muted-foreground);
|
||
font-size: 0.875rem;
|
||
}
|
||
.loading {
|
||
text-align: center;
|
||
padding: 1.25rem;
|
||
color: var(--muted-foreground);
|
||
}
|
||
|
||
.progress-section { margin-bottom: 1.5rem; display: none; }
|
||
.progress-section.active { display: block; }
|
||
.progress-item {
|
||
margin-bottom: 0.75rem;
|
||
padding: 0.75rem;
|
||
background: var(--gray-2);
|
||
border: 1px solid var(--border);
|
||
}
|
||
.progress-item .name {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.875rem;
|
||
color: var(--foreground);
|
||
margin-bottom: 0.5rem;
|
||
word-break: break-all;
|
||
}
|
||
.progress-item .status {
|
||
font-size: 0.75rem;
|
||
color: var(--muted-foreground);
|
||
margin-bottom: 0.375rem;
|
||
}
|
||
|
||
.info-text {
|
||
font-size: 0.75rem;
|
||
color: var(--muted-foreground);
|
||
margin-top: 0.5rem;
|
||
}
|
||
.warning-text {
|
||
font-size: 0.75rem;
|
||
color: var(--warning);
|
||
margin-top: 0.5rem;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<header class="shell-topbar">
|
||
<a class="brand" href="/"><img src="docs/netease.png" alt="logo">云盘上传</a>
|
||
<nav>
|
||
<a class="shell-btn shell-btn--ghost shell-btn--sm" href="/qrlogin-nocookie.html">登录</a>
|
||
<a class="shell-btn shell-btn--ghost shell-btn--sm" href="/">返回首页</a>
|
||
</nav>
|
||
</header>
|
||
|
||
<main class="shell-main">
|
||
<div class="shell-container shell-narrow" style="max-width:50rem">
|
||
<header class="shell-header">
|
||
<h1>云盘上传</h1>
|
||
<p class="sub">上传本地音频文件到网易云音乐云盘</p>
|
||
</header>
|
||
|
||
<section class="shell-card">
|
||
<div class="mode-section">
|
||
<label>上传模式</label>
|
||
<div class="mode-options">
|
||
<label class="mode-option">
|
||
<input type="radio" name="uploadMode" value="direct" checked />
|
||
<span class="mode-option-text">
|
||
<span class="mode-option-title">客户端直传</span>
|
||
<span class="mode-option-desc">文件直接上传到云存储，支持大文件，适合 Vercel 等平台</span>
|
||
</span>
|
||
</label>
|
||
<label class="mode-option">
|
||
<input type="radio" name="uploadMode" value="proxy" />
|
||
<span class="mode-option-text">
|
||
<span class="mode-option-title">后端代理</span>
|
||
<span class="mode-option-desc">文件通过服务器转发，更简洁，需要服务器支持大文件</span>
|
||
</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="upload-section">
|
||
<label class="upload-btn" id="uploadBtn">
|
||
选择文件（支持多选）
|
||
<input id="file" type="file" multiple accept="audio/*" />
|
||
</label>
|
||
<p class="info-text" id="modeInfo">支持大文件上传，文件将直接传输到云存储服务器</p>
|
||
</div>
|
||
|
||
<div id="progressSection" class="progress-section"></div>
|
||
|
||
<div id="app">
|
||
<div v-if="loading" class="loading">加载中...</div>
|
||
<ul v-else-if="songs.length > 0" class="songs-list">
|
||
<li v-for="(item, index) in songs" :key="index" class="song-item">
|
||
{{ item.songName }}
|
||
</li>
|
||
</ul>
|
||
<div v-else class="empty-state">暂无云盘歌曲</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</main>
|
||
|
||
<script src="https://fastly.jsdelivr.net/npm/axios@0.26.1/dist/axios.min.js"></script>
|
||
<script src="https://fastly.jsdelivr.net/npm/vue@3"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsmediatags/3.9.5/jsmediatags.min.js"></script>
|
||
<script>
|
||
const app = Vue.createApp({
|
||
data() {
|
||
return {
|
||
songs: [],
|
||
loading: false,
|
||
}
|
||
},
|
||
created() {
|
||
this.getData()
|
||
},
|
||
methods: {
|
||
getData() {
|
||
this.loading = true
|
||
axios({
|
||
url: `/user/cloud?time=${Date.now()}&cookie=${localStorage.getItem('cookie')}`,
|
||
})
|
||
.then((res) => {
|
||
this.songs = res.data.data || []
|
||
})
|
||
.catch((err) => {
|
||
console.error('获取云盘数据失败:', err)
|
||
})
|
||
.finally(() => {
|
||
this.loading = false
|
||
})
|
||
},
|
||
},
|
||
}).mount('#app')
|
||
|
||
let isUploading = false
|
||
let uploadMode = 'direct'
|
||
const progressSection = document.getElementById('progressSection')
|
||
const uploadBtn = document.getElementById('uploadBtn')
|
||
const fileInput = document.querySelector('input[type="file"]')
|
||
const modeInfo = document.getElementById('modeInfo')
|
||
|
||
document.querySelectorAll('input[name="uploadMode"]').forEach(radio => {
|
||
radio.addEventListener('change', function() {
|
||
uploadMode = this.value
|
||
if (uploadMode === 'direct') {
|
||
modeInfo.textContent = '支持大文件上传，文件将直接传输到云存储服务器'
|
||
modeInfo.className = 'info-text'
|
||
} else {
|
||
modeInfo.textContent = '文件将通过服务器转发，服务器需支持大文件上传（Vercel 限制 4.5MB）'
|
||
modeInfo.className = 'warning-text'
|
||
}
|
||
})
|
||
})
|
||
|
||
function main() {
|
||
fileInput.addEventListener('change', function (e) {
|
||
const files = this.files
|
||
if (files.length === 0) return
|
||
if (isUploading) return
|
||
|
||
uploadFilesSequentially(Array.from(files))
|
||
this.value = ''
|
||
})
|
||
}
|
||
main()
|
||
|
||
async function uploadFilesSequentially(files) {
|
||
isUploading = true
|
||
uploadBtn.classList.add('disabled')
|
||
progressSection.classList.add('active')
|
||
progressSection.innerHTML = ''
|
||
|
||
for (let i = 0; i < files.length; i++) {
|
||
if (uploadMode === 'direct') {
|
||
await uploadFileDirect(files[i], i + 1, files.length)
|
||
} else {
|
||
await uploadFileProxy(files[i], i + 1, files.length)
|
||
}
|
||
}
|
||
|
||
isUploading = false
|
||
uploadBtn.classList.remove('disabled')
|
||
app.getData()
|
||
}
|
||
|
||
function createProgressItem(file, index, total) {
|
||
const item = document.createElement('div')
|
||
item.className = 'progress-item'
|
||
item.id = `progress-${index}`
|
||
item.innerHTML = `
|
||
<div class="name">${file.name} (${formatSize(file.size)})</div>
|
||
<div class="status">准备中...</div>
|
||
<div class="progress-bar"><div class="fill"></div></div>
|
||
`
|
||
progressSection.appendChild(item)
|
||
return item
|
||
}
|
||
|
||
function updateProgress(index, status, percent, isError = false) {
|
||
const item = document.getElementById(`progress-${index}`)
|
||
if (!item) return
|
||
item.querySelector('.status').textContent = status
|
||
item.querySelector('.fill').style.width = `${percent}%`
|
||
if (isError) {
|
||
item.classList.add('error')
|
||
} else if (percent >= 100) {
|
||
item.classList.add('success')
|
||
}
|
||
}
|
||
|
||
function formatSize(bytes) {
|
||
if (bytes < 1024) return bytes + ' B'
|
||
if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB'
|
||
return (bytes / (1024 * 1024)).toFixed(1) + ' MB'
|
||
}
|
||
|
||
async function uploadFileProxy(file, index, total) {
|
||
createProgressItem(file, index, total)
|
||
|
||
try {
|
||
updateProgress(index, '上传中...', 10)
|
||
|
||
const formData = new FormData()
|
||
formData.append('songFile', file)
|
||
|
||
await axios({
|
||
method: 'post',
|
||
url: `/cloud?time=${Date.now()}&cookie=${localStorage.getItem('cookie')}`,
|
||
headers: {
|
||
'Content-Type': 'multipart/form-data',
|
||
},
|
||
data: formData,
|
||
onUploadProgress: (progressEvent) => {
|
||
const percent = Math.round((progressEvent.loaded / progressEvent.total) * 90) + 10
|
||
updateProgress(index, `上传中... ${Math.round(progressEvent.loaded / progressEvent.total * 100)}%`, Math.min(percent, 100))
|
||
},
|
||
timeout: 600000,
|
||
})
|
||
|
||
updateProgress(index, '上传完成！', 100)
|
||
|
||
} catch (err) {
|
||
console.error(`${file.name} 上传失败:`, err)
|
||
const errorMsg = err.response?.data?.msg || err.message || '未知错误'
|
||
if (err.response?.status === 413 || errorMsg.includes('PAYLOAD_TOO_LARGE')) {
|
||
updateProgress(index, '文件过大，请切换到客户端直传模式', 0, true)
|
||
} else {
|
||
updateProgress(index, `上传失败: ${errorMsg}`, 0, true)
|
||
}
|
||
}
|
||
}
|
||
|
||
async function calculateMD5(file) {
|
||
return new Promise((resolve, reject) => {
|
||
const chunkSize = 2 * 1024 * 1024
|
||
const chunks = Math.ceil(file.size / chunkSize)
|
||
let currentChunk = 0
|
||
const spark = new SparkMD5.ArrayBuffer()
|
||
const reader = new FileReader()
|
||
|
||
reader.onload = (e) => {
|
||
spark.append(e.target.result)
|
||
currentChunk++
|
||
if (currentChunk < chunks) {
|
||
loadNext()
|
||
} else {
|
||
resolve(spark.end())
|
||
}
|
||
}
|
||
|
||
reader.onerror = () => reject(reader.error)
|
||
|
||
function loadNext() {
|
||
const start = currentChunk * chunkSize
|
||
const end = Math.min(start + chunkSize, file.size)
|
||
reader.readAsArrayBuffer(file.slice(start, end))
|
||
}
|
||
|
||
loadNext()
|
||
})
|
||
}
|
||
|
||
async function parseMediaTags(file) {
|
||
return new Promise((resolve) => {
|
||
jsmediatags.read(file, {
|
||
onSuccess: function(tag) {
|
||
resolve({
|
||
title: tag.tags.title || null,
|
||
artist: tag.tags.artist || null,
|
||
album: tag.tags.album || null,
|
||
})
|
||
},
|
||
onError: function() {
|
||
resolve({ title: null, artist: null, album: null })
|
||
}
|
||
})
|
||
})
|
||
}
|
||
|
||
async function uploadFileDirect(file, index, total) {
|
||
createProgressItem(file, index, total)
|
||
|
||
try {
|
||
updateProgress(index, '计算文件MD5...', 5)
|
||
|
||
const md5 = await calculateMD5(file)
|
||
const fileSize = file.size
|
||
const filename = file.name
|
||
|
||
updateProgress(index, '解析音频元数据...', 8)
|
||
|
||
const mediaTags = await parseMediaTags(file)
|
||
|
||
updateProgress(index, '获取上传凭证...', 10)
|
||
|
||
const tokenRes = await axios({
|
||
method: 'post',
|
||
url: `/cloud/upload/token?time=${Date.now()}`,
|
||
data: {
|
||
cookie: localStorage.getItem('cookie'),
|
||
md5: md5,
|
||
fileSize: fileSize,
|
||
filename: filename,
|
||
},
|
||
})
|
||
|
||
if (tokenRes.data.code !== 200) {
|
||
throw new Error(tokenRes.data.msg || '获取上传凭证失败')
|
||
}
|
||
|
||
const tokenData = tokenRes.data.data
|
||
|
||
if (!tokenData.needUpload) {
|
||
updateProgress(index, '文件已存在，直接导入云盘...', 80)
|
||
await completeUpload(tokenData, file, mediaTags)
|
||
updateProgress(index, '上传完成！', 100)
|
||
return
|
||
}
|
||
|
||
updateProgress(index, '开始上传到云存储...', 15)
|
||
|
||
await axios({
|
||
method: 'post',
|
||
url: tokenData.uploadUrl,
|
||
headers: {
|
||
'x-nos-token': tokenData.uploadToken,
|
||
'Content-MD5': md5,
|
||
'Content-Type': 'audio/mpeg',
|
||
'Content-Length': String(fileSize),
|
||
},
|
||
data: file,
|
||
onUploadProgress: (progressEvent) => {
|
||
const percent = Math.round((progressEvent.loaded / progressEvent.total) * 70) + 15
|
||
updateProgress(index, `上传中... ${Math.round(progressEvent.loaded / progressEvent.total * 100)}%`, Math.min(percent, 85))
|
||
},
|
||
maxContentLength: Infinity,
|
||
maxBodyLength: Infinity,
|
||
timeout: 600000,
|
||
})
|
||
|
||
updateProgress(index, '上传完成，正在导入云盘...', 90)
|
||
|
||
await completeUpload(tokenData, file, mediaTags)
|
||
|
||
updateProgress(index, '上传完成！', 100)
|
||
|
||
} catch (err) {
|
||
console.error(`${file.name} 上传失败:`, err)
|
||
const errorMsg = err.response?.data?.msg || err.message || '未知错误'
|
||
updateProgress(index, `上传失败: ${errorMsg}`, 0, true)
|
||
}
|
||
}
|
||
|
||
async function completeUpload(tokenData, file, mediaTags = {}) {
|
||
const songName = mediaTags.title || file.name.replace(/\.[^.]+$/, '')
|
||
const artist = mediaTags.artist || '未知艺术家'
|
||
const album = mediaTags.album || '未知专辑'
|
||
|
||
const completeRes = await axios({
|
||
method: 'post',
|
||
url: `/cloud/upload/complete?time=${Date.now()}`,
|
||
data: {
|
||
cookie: localStorage.getItem('cookie'),
|
||
songId: tokenData.songId,
|
||
resourceId: tokenData.resourceId,
|
||
md5: tokenData.md5,
|
||
filename: file.name,
|
||
song: songName,
|
||
artist: artist,
|
||
album: album,
|
||
},
|
||
})
|
||
|
||
if (completeRes.data.code !== 200) {
|
||
throw new Error(completeRes.data.msg || '导入云盘失败')
|
||
}
|
||
|
||
return completeRes.data
|
||
}
|
||
</script>
|
||
<script src="https://fastly.jsdelivr.net/npm/spark-md5@3.0.2/spark-md5.min.js"></script>
|
||
</body>
|
||
</html>
|