diff --git a/src/api/member.js b/src/api/member.js index 68cace2..37bbc1d 100644 --- a/src/api/member.js +++ b/src/api/member.js @@ -85,7 +85,7 @@ class Member { * @param {FormData} data */ static uploadImage(data) { - return server.post(`/uploadImage`, data); + return server.post(`/uploadImage`, data,{config:{loading:false}}); } /** diff --git a/src/components/UploadImg.vue b/src/components/UploadImg.vue index 006e315..8ad652d 100644 --- a/src/components/UploadImg.vue +++ b/src/components/UploadImg.vue @@ -1,5 +1,5 @@ +

{{file.name}}

@@ -30,7 +37,12 @@ export default { return { file: undefined, uploadImg: "", - isLoad: false + isLoad: false, + uploadProgress: 0, // 新增进度状态 + uploadStatus: null,// 新增状态类型 + progressInterval: null, + boll:false, + continueUploading:true }; }, watch:{ @@ -48,6 +60,10 @@ export default { }, methods: { del() { + this.uploadProgress = 0; + this.uploadStatus = null; + this.boll = false + this.file = undefined; this.$emit("input", undefined); this.$refs.file.value='' @@ -60,6 +76,9 @@ export default { } }, change(ev) { + this.uploadProgress = 0; + this.uploadStatus = null; + let file = this.$refs.file.files[0]; let ele = this.$refs.file; @@ -90,11 +109,46 @@ export default { }); }, upload() { - let data = new FormData(); - data.append("image", this.file); - Member.uploadImage(data).then(res => { - this.$emit("input", res.path); - }); + this.uploadStatus = null // 重置状态 + this.uploadProgress = 0 // 重置进度 + this.boll = true + clearInterval(this.progressInterval); // 清除之前的定时器 + + this.progressInterval = setInterval(() => { + if (this.uploadProgress < 100&&this.continueUploading) { + this.uploadProgress += Math.floor(Math.random() * 2) + 1; + setTimeout(() => { + this.continueUploading = false; + // 暂停3秒后继续累加 + setTimeout(() => { + this.continueUploading = true; + }, 3000); // 这里的3000毫秒表示暂停3秒后继续 + }, 1000); + } + }, 50); + + let data = new FormData() + data.append("image", this.file) + + Member.uploadImage(data) + .then(res => { + this.$emit("input", res.path) + // 2秒后隐藏进度条 + if(res.path){ + setTimeout(() => { + this.uploadStatus = 'success' + this.uploadProgress = 100 + clearInterval(this.progressInterval); // 清除之前的定时器 + setTimeout(() => { + this.boll = false + },3000) + }, 2000) + } + }) + .catch(err => { + this.uploadStatus = 'exception' + this.uploadProgress = 100 + }) } } }; @@ -131,4 +185,20 @@ export default { object-fit: cover; } } + +.el-progress { + position: absolute; + bottom: -25px; + left:18px; + width: 300px; + margin-top: 10px; + + &-bar { + padding-right: 45px; + } + + &__text { + font-size: 12px!important; + } +}