MengYX
5 years ago
5 changed files with 266 additions and 218 deletions
@ -0,0 +1,71 @@ |
|||||
|
<template> |
||||
|
<el-table :data="tableData" style="width: 100%"> |
||||
|
|
||||
|
<el-table-column label="封面"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-image :src="scope.row.picture" style="width: 100px; height: 100px"> |
||||
|
<div class="image-slot el-image__error" slot="error"> |
||||
|
暂无封面 |
||||
|
</div> |
||||
|
</el-image> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="歌曲" sortable> |
||||
|
<template slot-scope="scope"> |
||||
|
<span style="margin-left: 10px">{{ scope.row.title }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="歌手" sortable> |
||||
|
<template slot-scope="scope"> |
||||
|
<p>{{ scope.row.artist }}</p> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="专辑" sortable> |
||||
|
<template slot-scope="scope"> |
||||
|
<p>{{ scope.row.album }}</p> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="操作"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-button @click="handlePlay(scope.$index, scope.row)" |
||||
|
circle icon="el-icon-video-play" type="success"> |
||||
|
</el-button> |
||||
|
<el-button @click="handleDownload(scope.row)" |
||||
|
circle icon="el-icon-download"> |
||||
|
</el-button> |
||||
|
<el-button @click="handleDelete(scope.$index, scope.row)" |
||||
|
circle icon="el-icon-delete" type="danger"> |
||||
|
</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import {DownloadBlobMusic, RemoveBlobMusic} from './util' |
||||
|
|
||||
|
export default { |
||||
|
name: "preview", |
||||
|
props: { |
||||
|
tableData: {type: Array, required: true}, |
||||
|
download_format: {type: String, required: true} |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
handlePlay(index, row) { |
||||
|
this.$emit("music_changed", row.file); |
||||
|
}, |
||||
|
handleDelete(index, row) { |
||||
|
RemoveBlobMusic(row); |
||||
|
this.tableData.splice(index, 1); |
||||
|
}, |
||||
|
handleDownload(row) { |
||||
|
DownloadBlobMusic(row, this.download_format) |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,82 @@ |
|||||
|
<template> |
||||
|
<el-upload |
||||
|
:auto-upload="false" |
||||
|
:on-change="handleFile" |
||||
|
:show-file-list="false" |
||||
|
action="" |
||||
|
drag |
||||
|
multiple> |
||||
|
<i class="el-icon-upload"/> |
||||
|
<div class="el-upload__text">将文件拖到此处，或<em>点击选择</em></div> |
||||
|
<div class="el-upload__tip" slot="tip">本工具仅在浏览器内对文件进行解锁，无需消耗流量</div> |
||||
|
</el-upload> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
"use strict";// 严格模式 用于尾调用优化 |
||||
|
|
||||
|
export default { |
||||
|
name: "upload", |
||||
|
data() { |
||||
|
return { |
||||
|
cacheQueue: [], |
||||
|
workers: [], |
||||
|
idle_workers: [], |
||||
|
thread_num: 1 |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
if (document.location.host !== "") { |
||||
|
//todo: Fail on Hot Reload |
||||
|
const worker = require("workerize-loader!../decrypt/common"); |
||||
|
this.thread_num = navigator.hardwareConcurrency || 1; |
||||
|
for (let i = 0; i < this.thread_num; i++) { |
||||
|
// noinspection JSValidateTypes,JSUnresolvedVariable |
||||
|
this.workers.push(worker().CommonDecrypt); |
||||
|
this.idle_workers.push(i); |
||||
|
} |
||||
|
} else { |
||||
|
const dec = require('../decrypt/common'); |
||||
|
this.workers.push(dec.CommonDecrypt); |
||||
|
this.idle_workers.push(0) |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
handleFile(file) { |
||||
|
// 有空闲worker 立刻处理文件 |
||||
|
if (this.idle_workers.length > 0) { |
||||
|
this.handleDoFile(file, this.idle_workers.shift()); |
||||
|
} |
||||
|
// 无空闲worker 则放入缓存队列 |
||||
|
else { |
||||
|
this.cacheQueue.push(file); |
||||
|
} |
||||
|
}, |
||||
|
handleCacheQueue(worker_id) { |
||||
|
// 调用方法消费缓存队列中的数据 |
||||
|
if (this.cacheQueue.length === 0) { |
||||
|
this.idle_workers.push(worker_id); |
||||
|
return |
||||
|
} |
||||
|
this.handleDoFile(this.cacheQueue.shift(), worker_id); |
||||
|
}, |
||||
|
handleDoFile(file, worker_id) { |
||||
|
this.workers[worker_id](file).then(data => { |
||||
|
this.$emit("handle_finish", data); |
||||
|
// 完成之后 执行新任务 todo: 可能导致call stack过长 |
||||
|
this.handleCacheQueue(worker_id); |
||||
|
}).catch(err => { |
||||
|
this.$emit("handle_error", err, file.name); |
||||
|
this.handleCacheQueue(worker_id); |
||||
|
}) |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
/*noinspection CssUnusedSymbol*/ |
||||
|
.el-upload-dragger { |
||||
|
width: 80vw !important; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,26 @@ |
|||||
|
export function DownloadBlobMusic(data, format) { |
||||
|
const a = document.createElement('a'); |
||||
|
a.href = data.file; |
||||
|
switch (format) { |
||||
|
case "1": |
||||
|
a.download = data.title + "." + data.ext; |
||||
|
break; |
||||
|
case "2": |
||||
|
a.download = data.artist + " - " + data.title + "." + data.ext; |
||||
|
break; |
||||
|
case "3": |
||||
|
a.download = data.title + " - " + data.artist + "." + data.ext; |
||||
|
break; |
||||
|
default: |
||||
|
a.download = data.filename; |
||||
|
break; |
||||
|
} |
||||
|
document.body.append(a); |
||||
|
a.click(); |
||||
|
a.remove(); |
||||
|
} |
||||
|
|
||||
|
export function RemoveBlobMusic(data) { |
||||
|
URL.revokeObjectURL(data.file); |
||||
|
URL.revokeObjectURL(data.picture); |
||||
|
} |
||||
Loading…
Reference in new issue