From fabc195e90d5a394b5089bf88305ea43eb791c04 Mon Sep 17 00:00:00 2001 From: RuoYi <yzz_ivy@163.com> Date: 星期三, 24 八月 2022 13:40:52 +0800 Subject: [PATCH] 修复多文件上传报错出现的异常问题 --- src/components/ImageUpload/index.vue | 56 ++++++++++++++++++--------- src/components/FileUpload/index.vue | 29 ++++++++++---- 2 files changed, 58 insertions(+), 27 deletions(-) diff --git a/src/components/FileUpload/index.vue b/src/components/FileUpload/index.vue index 53fc381..d3a0b97 100644 --- a/src/components/FileUpload/index.vue +++ b/src/components/FileUpload/index.vue @@ -12,7 +12,7 @@ :show-file-list="false" :headers="headers" class="upload-file-uploader" - ref="upload" + ref="fileUpload" > <!-- 涓婁紶鎸夐挳 --> <el-button type="primary">閫夊彇鏂囦欢</el-button> @@ -139,13 +139,15 @@ // 涓婁紶鎴愬姛鍥炶皟 function handleUploadSuccess(res, file) { - uploadList.value.push({ name: res.fileName, url: res.fileName }); - if (uploadList.value.length === number.value) { - fileList.value = fileList.value.filter(f => f.url !== undefined).concat(uploadList.value); - uploadList.value = []; - number.value = 0; - emit("update:modelValue", listToString(fileList.value)); + if (res.code === 200) { + uploadList.value.push({ name: res.fileName, url: res.fileName }); + uploadedSuccessfully(); + } else { + number.value--; proxy.$modal.closeLoading(); + proxy.$modal.msgError(res.msg); + proxy.$refs.fileUpload.handleRemove(file); + uploadedSuccessfully(); } } @@ -153,6 +155,17 @@ function handleDelete(index) { fileList.value.splice(index, 1); emit("update:modelValue", listToString(fileList.value)); +} + +// 涓婁紶缁撴潫澶勭悊 +function uploadedSuccessfully() { + if (number.value > 0 && uploadList.value.length === number.value) { + fileList.value = fileList.value.filter(f => f.url !== undefined).concat(uploadList.value); + uploadList.value = []; + number.value = 0; + emit("update:modelValue", listToString(fileList.value)); + proxy.$modal.closeLoading(); + } } // 鑾峰彇鏂囦欢鍚嶇О @@ -169,7 +182,7 @@ let strs = ""; separator = separator || ","; for (let i in list) { - if(undefined !== list[i].url) { + if (list[i].url) { strs += list[i].url + separator; } } diff --git a/src/components/ImageUpload/index.vue b/src/components/ImageUpload/index.vue index 7580438..149524b 100644 --- a/src/components/ImageUpload/index.vue +++ b/src/components/ImageUpload/index.vue @@ -9,8 +9,8 @@ :limit="limit" :on-error="handleUploadError" :on-exceed="handleExceed" - name="file" - :on-remove="handleRemove" + ref="imageUpload" + :before-remove="handleDelete" :show-file-list="true" :headers="headers" :file-list="fileList" @@ -107,23 +107,6 @@ } },{ deep: true, immediate: true }); -// 鍒犻櫎鍥剧墖 -function handleRemove(file, files) { - emit("update:modelValue", listToString(fileList.value)); -} - -// 涓婁紶鎴愬姛鍥炶皟 -function handleUploadSuccess(res) { - uploadList.value.push({ name: res.fileName, url: res.fileName }); - if (uploadList.value.length === number.value) { - fileList.value = fileList.value.filter(f => f.url !== undefined).concat(uploadList.value); - uploadList.value = []; - number.value = 0; - emit("update:modelValue", listToString(fileList.value)); - proxy.$modal.closeLoading(); - } -} - // 涓婁紶鍓峫oading鍔犺浇 function handleBeforeUpload(file) { let isImg = false; @@ -162,6 +145,41 @@ proxy.$modal.msgError(`涓婁紶鏂囦欢鏁伴噺涓嶈兘瓒呰繃 ${props.limit} 涓�!`); } +// 涓婁紶鎴愬姛鍥炶皟 +function handleUploadSuccess(res, file) { + if (res.code === 200) { + uploadList.value.push({ name: res.fileName, url: res.fileName }); + uploadedSuccessfully(); + } else { + number.value--; + proxy.$modal.closeLoading(); + proxy.$modal.msgError(res.msg); + proxy.$refs.imageUpload.handleRemove(file); + uploadedSuccessfully(); + } +} + +// 鍒犻櫎鍥剧墖 +function handleDelete(file) { + const findex = fileList.value.map(f => f.name).indexOf(file.name); + if (findex > -1 && uploadList.value.length === number.value) { + fileList.value.splice(findex, 1); + emit("update:modelValue", listToString(fileList.value)); + return false; + } +} + +// 涓婁紶缁撴潫澶勭悊 +function uploadedSuccessfully() { + if (number.value > 0 && uploadList.value.length === number.value) { + fileList.value = fileList.value.filter(f => f.url !== undefined).concat(uploadList.value); + uploadList.value = []; + number.value = 0; + emit("update:modelValue", listToString(fileList.value)); + proxy.$modal.closeLoading(); + } +} + // 涓婁紶澶辫触 function handleUploadError() { proxy.$modal.msgError("涓婁紶鍥剧墖澶辫触"); -- Gitblit v1.9.3