From 87317f44d9cc20ad70b6971168667e1c843e03d8 Mon Sep 17 00:00:00 2001 From: inleft <inleft@qq.com> Date: Fri, 26 Aug 2022 01:16:50 +0800 Subject: [PATCH] 添加上传进度条 添加日志统计文字 --- src/components/mini/box10-add.vue | 42 +++++++++++++++++++++++++++++++++--------- 1 files changed, 33 insertions(+), 9 deletions(-) diff --git a/src/components/mini/box10-add.vue b/src/components/mini/box10-add.vue index 8800027..e7f0ea4 100644 --- a/src/components/mini/box10-add.vue +++ b/src/components/mini/box10-add.vue @@ -24,7 +24,7 @@ <a-form-model-item label="日志文件" v-show="!form.online"> <a-upload ref="blogFileUpload" :customRequest="customRequest" name="file" :showUploadList="true" @change="handleChange" :default-file-list="form.blogFileList" :beforeUpload="beforeUpload" - :data="{'fileType':fileTypeMarkDown}" accept=".md,.html,.htm,.txt"> + :data="{'bucketName':bucketName.bucket_article}" accept=".md,.html,.htm,.txt"> <a-button> <a-icon type="upload" />限 markdown/html </a-button> @@ -58,7 +58,7 @@ </span> </a-form-model-item> - <a-form-model-item label=" 日志类型"> + <a-form-model-item label=" 日志主类型"> <a-select v-model="form.blogType" mode="default" placeholder="" :getPopupContainer="getCalendarContainer()"> <a-select-option value="1"> @@ -68,10 +68,16 @@ html </a-select-option> <a-select-option value="3"> - video + 视频 + </a-select-option> + <a-select-option value="4"> + 音频 </a-select-option> <a-select-option value="5"> - fast(闪念) + 图组 + </a-select-option> + <a-select-option value="9"> + taking </a-select-option> </a-select> </a-form-model-item> @@ -102,7 +108,7 @@ <a-form-model-item label="封面"> <a-upload :customRequest="customRequest" name="file" :showUploadList="true" list-type="picture" - :data="{'fileType':fileTypeCover}" @change="handleChangeCoverFile" + :data="{'bucketName':bucketName.bucket_cover}" @change="handleChangeCoverFile" :default-file-list="form.coverFileList" :beforeUpload="beforeUploadCover" accept=".jpg,.png,.jpeg"> <!-- :disabled="form.coverFileList.length>=1" --> @@ -213,8 +219,7 @@ }; return { - fileTypeMarkDown: myConstant.fileTypeMarkDown, - fileTypeCover: myConstant.fileTypeCover, + bucketName: myConstant.bucketName, blogArticleType: [], tags: [], inputVisible: false, @@ -370,17 +375,36 @@ customRequest(option) { const formData = new FormData() formData.append('file', option.file) - formData.append('fileType', option.data.fileType) + formData.append('bucketName', option.data.bucketName) formData.append('authCode', this.form.secret == "" ? "" : md5(this.form.secret)) myFileInfoUpload(formData).then((res) => { if (res.success) { this.$message.success('上传成功') - option.onSuccess(res, option.file) + // 在上传成功后进度条显示为99 + progress.percent = 100 } else { this.$message.error('上传失败:' + res.message) } }) + + let progress = { + percent: 1 + } + let speed = 100 / (option.file.size / 65000) //上传速度 + const intervalId = setInterval(() => { + // 控制进度条防止在未上传成功时进度条达到100 + if (progress.percent < 99 && progress.percent + speed < 100) { + progress.percent += speed //控制进度条速度 + option.onProgress(progress) //onProgress接收一个对象{ percent: 进度 }在进度条上显示 + } else if ((progress.percent < 100)) { + progress.percent++ + } else if (progress.percent >= 100) { + clearInterval(intervalId) + } + }, 500) + + }, disabledDate(current) { return current < moment().subtract(1, "day"); -- Gitblit v1.9.1