Emmm Monster
4 years ago
16 changed files with 343 additions and 309 deletions
@ -0,0 +1,77 @@ |
|||||
|
<template> |
||||
|
<el-upload |
||||
|
:auto-upload="false" |
||||
|
:on-change="addFile" |
||||
|
:show-file-list="false" |
||||
|
action="" |
||||
|
drag |
||||
|
multiple> |
||||
|
<i class="el-icon-upload"/> |
||||
|
<div class="el-upload__text">将文件拖到此处，或<em>点击选择</em></div> |
||||
|
<div slot="tip" class="el-upload__tip">本工具仅在浏览器内对文件进行解锁，无需消耗流量</div> |
||||
|
<transition name="el-fade-in"><!--todo: add delay to animation--> |
||||
|
<el-progress |
||||
|
v-show="progress_show" :format="progress_string" :percentage="progress_value" |
||||
|
:stroke-width="16" :text-inside="true" |
||||
|
style="margin: 16px 6px 0 6px" |
||||
|
></el-progress> |
||||
|
</transition> |
||||
|
</el-upload> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import {spawn, Worker, Pool} from "threads" |
||||
|
import {CommonDecrypt} from "@/decrypt/common.ts"; |
||||
|
import {DecryptQueue} from "@/component/utils"; |
||||
|
|
||||
|
export default { |
||||
|
name: "FileSelector", |
||||
|
data() { |
||||
|
return { |
||||
|
task_all: 0, |
||||
|
task_finished: 0, |
||||
|
queue: new DecryptQueue() // for http or file protocol |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
progress_value() { |
||||
|
return this.task_all ? this.task_finished / this.task_all * 100 : 0 |
||||
|
}, |
||||
|
progress_show() { |
||||
|
return this.task_all !== this.task_finished |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
if (window.Worker) { |
||||
|
console.log("Using Worker Pool") |
||||
|
this.queue = Pool( |
||||
|
() => spawn(new Worker('@/component/worker.ts')), |
||||
|
navigator.hardwareConcurrency || 1 |
||||
|
) |
||||
|
} else { |
||||
|
console.log("Using Queue in Main Thread") |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
progress_string() { |
||||
|
return `${this.task_finished} / ${this.task_all}` |
||||
|
}, |
||||
|
async addFile(file) { |
||||
|
this.task_all++ |
||||
|
this.queue.queue(async (dec = CommonDecrypt) => { |
||||
|
console.log("start handling", file.name) |
||||
|
try { |
||||
|
this.$emit("success", await dec(file)); |
||||
|
} catch (e) { |
||||
|
console.error(e) |
||||
|
this.$emit("error", file) |
||||
|
} finally { |
||||
|
this.task_finished++ |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
</script> |
||||
|
|
||||
@ -1,120 +0,0 @@ |
|||||
<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> |
|
||||
<transition name="el-fade-in"> |
|
||||
<el-progress |
|
||||
:format="progressFormat" :percentage="progress_percent" :stroke-width="16" |
|
||||
:text-inside="true" style="margin: 16px 6px 0 6px" |
|
||||
v-show="progress_show" |
|
||||
></el-progress> |
|
||||
</transition> |
|
||||
</el-upload> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
"use strict";// 严格模式 用于尾调用优化 |
|
||||
|
|
||||
export default { |
|
||||
name: "upload", |
|
||||
data() { |
|
||||
return { |
|
||||
cacheQueue: [], |
|
||||
workers: [], |
|
||||
idle_workers: [], |
|
||||
thread_num: 1, |
|
||||
|
|
||||
progress_show: false, |
|
||||
|
|
||||
progress_finished: 0, |
|
||||
progress_all: 0, |
|
||||
progress_percent: 0, |
|
||||
} |
|
||||
}, |
|
||||
mounted() { |
|
||||
if (document.location.host !== "" && process.env.NODE_ENV === 'production') { |
|
||||
this.thread_num = navigator.hardwareConcurrency || 1; |
|
||||
const worker = require("workerize-loader!../decrypt/common"); |
|
||||
// noinspection JSValidateTypes,JSUnresolvedVariable |
|
||||
this.workers.push(worker().CommonDecrypt); |
|
||||
this.idle_workers.push(0); |
|
||||
// delay to optimize for first loading |
|
||||
setTimeout(() => { |
|
||||
for (let i = 1; i < this.thread_num; i++) { |
|
||||
// noinspection JSValidateTypes,JSUnresolvedVariable |
|
||||
this.workers.push(worker().CommonDecrypt); |
|
||||
this.idle_workers.push(i); |
|
||||
} |
|
||||
}, 5000); |
|
||||
} else { |
|
||||
const dec = require('../decrypt/common'); |
|
||||
this.workers.push(dec.CommonDecrypt); |
|
||||
this.idle_workers.push(0) |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
progressFormat() { |
|
||||
return this.progress_finished + "/" + (this.progress_all) |
|
||||
}, |
|
||||
progressChange(finish, all) { |
|
||||
this.progress_all += all; |
|
||||
this.progress_finished += finish; |
|
||||
this.progress_percent = Math.round(this.progress_finished / this.progress_all * 100); |
|
||||
if (this.progress_finished === this.progress_all) { |
|
||||
setTimeout(() => { |
|
||||
this.progress_show = false; |
|
||||
this.progress_finished = 0; |
|
||||
this.progress_all = 0; |
|
||||
}, 3000); |
|
||||
} else { |
|
||||
this.progress_show = true; |
|
||||
} |
|
||||
}, |
|
||||
handleFile(file) { |
|
||||
this.progressChange(0, +1); |
|
||||
// 有空闲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); |
|
||||
this.progressChange(+1, 0); |
|
||||
}).catch(err => { |
|
||||
this.$emit("handle_error", err, file.name); |
|
||||
this.handleCacheQueue(worker_id); |
|
||||
this.progressChange(+1, 0); |
|
||||
}) |
|
||||
}, |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style scoped> |
|
||||
/*noinspection CssUnusedSymbol*/ |
|
||||
.el-upload-dragger { |
|
||||
width: 80vw !important; |
|
||||
} |
|
||||
</style> |
|
||||
@ -0,0 +1,4 @@ |
|||||
|
import {expose} from "threads/worker"; |
||||
|
import {CommonDecrypt} from "@/decrypt/common"; |
||||
|
|
||||
|
expose(CommonDecrypt) |
||||
Loading…
Reference in new issue