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" > 选取文件 @@ -139,13 +139,15 @@ function handleUploadError(err) { // 上传成功回调 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(); } } @@ -155,6 +157,17 @@ function handleDelete(index) { 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(); + } +} + // 获取文件名称 function getFileName(name) { if (name.lastIndexOf("/") > -1) { @@ -169,7 +182,7 @@ function listToString(list, separator) { 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 @@ watch(() => props.modelValue, val => { } },{ 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(); - } -} - // 上传前loading加载 function handleBeforeUpload(file) { let isImg = false; @@ -162,6 +145,41 @@ function handleExceed() { 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("上传图片失败");