Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

アップロードプログレスバーが動かないのを修正 Fix #6306 (#6307)

Browse source
This commit is contained in:
MeiMei 2020-05-02 10:00:43 +09:00 committed by GitHub
parent ddbdb94ba6
commit b5e87a46b0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 14 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/client/components/uploader.vue
View file

@ -4,16 +4,16 @@
<li v-for="ctx in uploads" :key="ctx.id"> <li v-for="ctx in uploads" :key="ctx.id">
<div class="img" :style="{ backgroundImage: `url(${ ctx.img })` }"></div> <div class="img" :style="{ backgroundImage: `url(${ ctx.img })` }"></div>
<div class="top"> <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"> <p class="status">
<span class="initing" v-if="ctx.progress == undefined">{{ $t('waiting') }}<mk-ellipsis/></span> <span class="initing" v-if="ctx.progressValue === 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="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.progress != undefined">{{ Math.floor((ctx.progress.value / ctx.progress.max) * 100) }}</span> <span class="percentage" v-if="ctx.progressValue !== undefined">{{ Math.floor((ctx.progressValue / ctx.progressMax) * 100) }}</span>
</p> </p>
</div> </div>
<progress v-if="ctx.progress != undefined && ctx.progress.value != ctx.progress.max" :value="ctx.progress.value" :max="ctx.progress.max"></progress> <progress v-if="ctx.progressValue !== undefined && ctx.progressValue !== ctx.progressMax" :value="ctx.progressValue" :max="ctx.progressMax"></progress>
<div class="progress initing" v-if="ctx.progress == undefined"></div> <div class="progress initing" v-if="ctx.progressValue === undefined"></div>
<div class="progress waiting" v-if="ctx.progress != undefined && ctx.progress.value == ctx.progress.max"></div> <div class="progress waiting" v-if="ctx.progressValue !== undefined && ctx.progressValue === ctx.progressMax"></div>
</li> </li>
</ol> </ol>
</div> </div>
@ -24,12 +24,14 @@ import Vue from 'vue';
import i18n from '../i18n'; import i18n from '../i18n';
import { apiUrl } from '../config'; import { apiUrl } from '../config';
//import getMD5 from '../../scripts/get-md5'; //import getMD5 from '../../scripts/get-md5';
import { faSpinner } from '@fortawesome/free-solid-svg-icons';
export default Vue.extend({ export default Vue.extend({
i18n, i18n,
data() { data() {
return { return {
uploads: [] uploads: [],
faSpinner
}; };
}, },
methods: { methods: {
@ -56,7 +58,8 @@ export default Vue.extend({
const ctx = { const ctx = {
id: id, id: id,
name: name || file.name || 'untitled', name: name || file.name || 'untitled',
progress: undefined, progressMax: undefined,
progressValue: undefined,
img: window.URL.createObjectURL(file) img: window.URL.createObjectURL(file)
}; };
@ -84,9 +87,8 @@ export default Vue.extend({
xhr.upload.onprogress = e => { xhr.upload.onprogress = e => {
if (e.lengthComputable) { if (e.lengthComputable) {
if (ctx.progress == undefined) ctx.progress = {}; ctx.progressMax = e.total;
ctx.progress.max = e.total; ctx.progressValue = e.loaded;
ctx.progress.value = e.loaded;
} }
}; };