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;