From b5e87a46b04fe29de903499bb3a03f4f4e2565c1 Mon Sep 17 00:00:00 2001
From: MeiMei <30769358+mei23@users.noreply.github.com>
Date: Sat, 2 May 2020 10:00:43 +0900
Subject: [PATCH] =?UTF-8?q?=E3=82=A2=E3=83=83=E3=83=97=E3=83=AD=E3=83=BC?=
=?UTF-8?q?=E3=83=89=E3=83=97=E3=83=AD=E3=82=B0=E3=83=AC=E3=82=B9=E3=83=90?=
=?UTF-8?q?=E3=83=BC=E3=81=8C=E5=8B=95=E3=81=8B=E3=81=AA=E3=81=84=E3=81=AE?=
=?UTF-8?q?=E3=82=92=E4=BF=AE=E6=AD=A3=20Fix=20#6306=20(#6307)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/client/components/uploader.vue | 26 ++++++++++++++------------
1 file changed, 14 insertions(+), 12 deletions(-)
diff --git a/src/client/components/uploader.vue b/src/client/components/uploader.vue
index 14a4f845c1..4ceb5e2877 100644
--- a/src/client/components/uploader.vue
+++ b/src/client/components/uploader.vue
@@ -4,16 +4,16 @@
<li v-for="ctx in uploads" :key="ctx.id">
<div class="img" :style="{ backgroundImage: `url(${ ctx.img })` }"></div>
<div class="top">
- <p class="name"><fa icon="spinner" pulse/>{{ ctx.name }}</p>
+ <p class="name"><fa :icon="faSpinner" pulse/>{{ ctx.name }}</p>
<p class="status">
- <span class="initing" v-if="ctx.progress == undefined">{{ $t('waiting') }}<mk-ellipsis/></span>
- <span class="kb" v-if="ctx.progress != undefined">{{ String(Math.floor(ctx.progress.value / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }}<i>KB</i> / {{ String(Math.floor(ctx.progress.max / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }}<i>KB</i></span>
- <span class="percentage" v-if="ctx.progress != undefined">{{ Math.floor((ctx.progress.value / ctx.progress.max) * 100) }}</span>
+ <span class="initing" v-if="ctx.progressValue === undefined">{{ $t('waiting') }}<mk-ellipsis/></span>
+ <span class="kb" v-if="ctx.progressValue !== undefined">{{ String(Math.floor(ctx.progressValue / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }}<i>KB</i> / {{ String(Math.floor(ctx.progressMax / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }}<i>KB</i></span>
+ <span class="percentage" v-if="ctx.progressValue !== undefined">{{ Math.floor((ctx.progressValue / ctx.progressMax) * 100) }}</span>
</p>
</div>
- <progress v-if="ctx.progress != undefined && ctx.progress.value != ctx.progress.max" :value="ctx.progress.value" :max="ctx.progress.max"></progress>
- <div class="progress initing" v-if="ctx.progress == undefined"></div>
- <div class="progress waiting" v-if="ctx.progress != undefined && ctx.progress.value == ctx.progress.max"></div>
+ <progress v-if="ctx.progressValue !== undefined && ctx.progressValue !== ctx.progressMax" :value="ctx.progressValue" :max="ctx.progressMax"></progress>
+ <div class="progress initing" v-if="ctx.progressValue === undefined"></div>
+ <div class="progress waiting" v-if="ctx.progressValue !== undefined && ctx.progressValue === ctx.progressMax"></div>
</li>
</ol>
</div>
@@ -24,12 +24,14 @@ import Vue from 'vue';
import i18n from '../i18n';
import { apiUrl } from '../config';
//import getMD5 from '../../scripts/get-md5';
+import { faSpinner } from '@fortawesome/free-solid-svg-icons';
export default Vue.extend({
i18n,
data() {
return {
- uploads: []
+ uploads: [],
+ faSpinner
};
},
methods: {
@@ -56,7 +58,8 @@ export default Vue.extend({
const ctx = {
id: id,
name: name || file.name || 'untitled',
- progress: undefined,
+ progressMax: undefined,
+ progressValue: undefined,
img: window.URL.createObjectURL(file)
};
@@ -84,9 +87,8 @@ export default Vue.extend({
xhr.upload.onprogress = e => {
if (e.lengthComputable) {
- if (ctx.progress == undefined) ctx.progress = {};
- ctx.progress.max = e.total;
- ctx.progress.value = e.loaded;
+ ctx.progressMax = e.total;
+ ctx.progressValue = e.loaded;
}
};