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 | 57 ++++++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 46 insertions(+), 11 deletions(-)
diff --git a/src/components/mini/box10-add.vue b/src/components/mini/box10-add.vue
index ef07260..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" -->
@@ -187,6 +193,7 @@
} from '../../api/blogArticleType.js'
import myConstant from "../../config/myConstant.js"
+ import md5 from 'js-md5';
export default {
beforeMount() {
@@ -212,8 +219,7 @@
};
return {
- fileTypeMarkDown: myConstant.fileTypeMarkDown,
- fileTypeCover: myConstant.fileTypeCover,
+ bucketName: myConstant.bucketName,
blogArticleType: [],
tags: [],
inputVisible: false,
@@ -259,7 +265,7 @@
],
secret: [{
required: true,
- message: '不正经的人..',
+ message: '好像这里错了..',
trigger: 'blur'
}],
common: [{
@@ -293,6 +299,11 @@
},
beforeUploadCover(file, fileList) {
return new Promise((resolve, reject) => {
+ if (this.form.secret == null || this.form.secret == "") {
+ this.$message.error('需要正确的授权码');
+ return reject(false);
+ }
+
if (this.form.coverFileList.length >= 1) {
this.$message.error('这里最多上传一个文件');
return reject(false);
@@ -306,6 +317,11 @@
},
beforeUpload(file, fileList) {
return new Promise((resolve, reject) => {
+ if (this.form.secret == null || this.form.secret == "") {
+ this.$message.error('需要正确的口令..');
+ return reject(false);
+ }
+
if (this.form.blogFileList.length >= 1) {
this.$message.error('这里最多上传一个文件');
return reject(false);
@@ -359,17 +375,36 @@
customRequest(option) {
const formData = new FormData()
formData.append('file', option.file)
- formData.append('fileType', option.data.fileType)
- formData.append('authCode', this.form.secret)
+ 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