diff --git a/src/components/UploadForm.vue b/src/components/UploadForm.vue index e3ea92f..670f6d6 100644 --- a/src/components/UploadForm.vue +++ b/src/components/UploadForm.vue @@ -34,10 +34,27 @@
- + + + + + + + + - + + + + + +
@@ -121,8 +138,9 @@ data() { return { fileList: [], uploading: false, - maxUploading: 10, + maxUploading: 6, waitingList: [], + exceptionList: [], listScrolled: false, fileListLength: 0 } @@ -168,6 +186,10 @@ beforeDestroy() { }, methods: { uploadFile(file) { + // 如果fileList中不存在该文件,说明已被删除,直接返回 + if (!this.fileList.find(item => item.uid === file.file.uid)) { + return + } if (this.uploadingCount > this.maxUploading) { this.waitingList.push(file) this.fileList.find(item => item.uid === file.file.uid).status = 'waiting' @@ -194,6 +216,7 @@ methods: { this.$message.error('认证状态错误!') this.$router.push('/login') } else { + this.exceptionList.push(file) file.onError(err, file.file) } }).finally(() => { @@ -375,11 +398,32 @@ methods: { }) }, clearFileList() { - this.fileList = [] - this.$message({ - type: 'info', - message: '列表已清空' - }) + if (this.fileList.length > 0) { + this.fileList = [] + this.$message({ + type: 'success', + message: '文件列表已清空' + }) + } else { + this.$message({ + type: 'info', + message: '文件列表为空' + }) + } + }, + clearSuccessList() { + if (this.uploadSuccessCount > 0) { + this.fileList = this.fileList.filter(item => item.status !== 'done' && item.status !== 'success') + this.$message({ + type: 'success', + message: '成功上传文件已清空' + }) + } else { + this.$message({ + type: 'info', + message: '成功上传文件为空' + }) + } }, handlePaste(event) { const items = event.clipboardData.items @@ -523,6 +567,23 @@ methods: { }, handleScroll(event) { this.listScrolled = event.scrollTop > 0 && this.fileList.length > 0 + }, + retryError() { + if (this.exceptionList.length > 0) { + this.exceptionList.forEach(file => { + console.log(file) + this.uploadFile({ file: file.file, + onProgress: (evt) => this.handleProgress(evt), + onSuccess: (response, file) => this.handleSuccess(response, file), + onError: (error, file) => this.handleError(error, file) }); + }); + this.exceptionList = [] + } else { + this.$message({ + type: 'info', + message: '无上传失败文件' + }) + } } } } @@ -680,7 +741,8 @@ methods: { display: flex; justify-content: space-between; align-items: center; - padding: 10px; + height: 7vh; + padding: 0 20px; position: sticky; top: 0; z-index: 1;