You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
72 lines
2.0 KiB
72 lines
2.0 KiB
<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">将文件拖到此处</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 { Decrypt } from '@/decrypt';
|
|
import { DecryptQueue } from '@/utils/utils';
|
|
import { storage } from '@/utils/storage';
|
|
|
|
export default {
|
|
name: 'FileSelector',
|
|
data() {
|
|
return {
|
|
task_all: 0,
|
|
task_finished: 0,
|
|
queue: new DecryptQueue(), // for http or file protocol
|
|
parallel: false,
|
|
};
|
|
},
|
|
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 && window.location.protocol !== 'file:' && process.env.NODE_ENV === 'production') {
|
|
console.log('Using Worker Pool');
|
|
this.queue = Pool(() => spawn(new Worker('@/utils/worker.ts')), navigator.hardwareConcurrency || 1);
|
|
this.parallel = true;
|
|
} 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 = Decrypt) => {
|
|
console.log('start handling', file.name);
|
|
try {
|
|
this.$emit('success', await dec(file, await storage.getAll()));
|
|
} catch (e) {
|
|
console.error(e);
|
|
this.$emit('error', e, file.name);
|
|
} finally {
|
|
this.task_finished++;
|
|
}
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|