From 01e600707a8a91fe6213003091b96ea0d4fe155e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=90=95=E9=87=91=E6=B3=BD?= <1098696801@qq.com> Date: Thu, 23 Jun 2022 20:37:06 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=20=E4=B8=8A=E4=BC=A0?= =?UTF-8?q?=E6=96=87=E4=BB=B6/=E5=9B=BE=E7=89=87=20=E6=97=A0=E6=B3=95?= =?UTF-8?q?=E5=8A=A8=E6=80=81=E6=B8=B2=E6=9F=93=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/magic/form/mb-upload-file.vue | 61 +++++++++-------- .../components/magic/form/mb-upload-image.vue | 68 ++++++++++++------- 2 files changed, 76 insertions(+), 53 deletions(-) diff --git a/magic-boot-ui/src/components/magic/form/mb-upload-file.vue b/magic-boot-ui/src/components/magic/form/mb-upload-file.vue index 3e2d038..936c374 100644 --- a/magic-boot-ui/src/components/magic/form/mb-upload-file.vue +++ b/magic-boot-ui/src/components/magic/form/mb-upload-file.vue @@ -11,10 +11,10 @@ :multiple="multiple" :limit="limit" :on-exceed="handleExceed" - v-bind="uploadDynamicProps" :show-file-list="showFileList" :before-upload="beforeAvatarUpload" :on-success="handleAvatarSuccess" + :file-list="fileList" > {{ label }}
支持上传{{ getSettingSuffixs().replaceAll(',', '，') }}文件，且不超过{{ maxFileSize }}MB
@@ -108,12 +108,19 @@ export default { uploadDomId: Math.random(), fileList: [], uploadLoading: false, - uploadDynamicProps: {} + emitUpdate: true } }, watch: { - modelValue(newValue) { - this.renderFile() + modelValue() { + if(this.emitUpdate){ + this.emitUpdate = false + if(this.fileList.length == 0){ + this.renderFile() + } + }else{ + this.renderFile() + } } }, created() { @@ -126,25 +133,14 @@ export default { } else { this.renderFile() } - // 解决多文件上传时，第一次上传的多个的时候 只能有一个成功的bug - if (this.modelValue instanceof Array && this.modelValue.length > 0) { - this.uploadDynamicProps.fileList = this.fileList - } else { - if (this.modelValue) { - this.uploadDynamicProps.fileList = this.fileList - } - } if(this.action){ this.actionUrl = import.meta.env.VITE_APP_BASE_API + this.action } }, methods: { - handlerRemove(file){ - this.$refs.uploadRef.handleRemove(file) - }, - renderFile() { - if (this.modelValue instanceof Array && this.modelValue.length > 0) { - this.fileList = this.modelValue.map(it => { + setFileList(){ + if(this.urls.length > 0){ + this.fileList = this.urls.map(it => { return { name: it.substring(it.lastIndexOf('/') + 1), response: { @@ -154,18 +150,21 @@ export default { } } }) - } else { - if (this.modelValue) { - this.fileList.push({ - name: this.modelValue.substring(this.modelValue.lastIndexOf('/') + 1), - response: { - data: { - url: this.modelValue - } - } - }) + } + }, + renderFile() { + if(this.multiple && this.join && this.modelValue){ + this.urls = this.modelValue.split(',') + }else{ + if (this.modelValue instanceof Array && this.modelValue.length > 0) { + this.urls = this.modelValue + } else { + if (this.modelValue) { + this.urls = [this.modelValue] + } } } + this.setFileList() }, handleRemove(file, fileList) { var url = file.response.data.url @@ -178,14 +177,17 @@ export default { if (this.multiple) { if(this.join){ this.$emit('update:modelValue', this.urls.join(',')) + this.emitUpdate = true this.$emit('change', this.urls.join(',')) }else{ this.$emit('update:modelValue', this.urls) + this.emitUpdate = true this.$emit('change', this.urls) } } else { document.getElementById(this.uploadDomId).getElementsByClassName('el-upload__input')[0].removeAttribute('disabled') this.$emit('update:modelValue', '') + this.emitUpdate = true this.$emit('change', '') } this.$delete('/system/file/delete', { url: encodeURI(url) }) @@ -209,14 +211,17 @@ export default { if (this.multiple) { if(this.join){ this.$emit('update:modelValue', this.urls.join(',')) + this.emitUpdate = true this.$emit('change', this.urls.join(',')) }else{ this.$emit('update:modelValue', this.urls) + this.emitUpdate = true this.$emit('change', this.urls) } } else { document.getElementById(this.uploadDomId).getElementsByClassName('el-upload__input')[0].setAttribute('disabled', '') this.$emit('update:modelValue', res.data.url) + this.emitUpdate = true this.$emit('change', res.data.url) } } diff --git a/magic-boot-ui/src/components/magic/form/mb-upload-image.vue b/magic-boot-ui/src/components/magic/form/mb-upload-image.vue index 567d73a..3c74580 100644 --- a/magic-boot-ui/src/components/magic/form/mb-upload-image.vue +++ b/magic-boot-ui/src/components/magic/form/mb-upload-image.vue @@ -38,7 +38,6 @@ class="uploadBox" :style="{ width: width + 'px', height: height + 'px' }" :action="action" - v-bind="uploadDynamicProps" :headers="headers" accept=".jpg,.jpeg,.png,.gif" :show-file-list="false" @@ -46,6 +45,7 @@ :limit="limit" :on-success="handleAvatarSuccess" :on-exceed="onExceed" + :file-list="fileList" > @@ -152,18 +152,18 @@ export default { cropperOption: {}, urls: [], fileList: [], - uploadDynamicProps: {} + emitUpdate: true } }, watch: { - modelValue(newValue) { - if (newValue instanceof Array) { - this.urls = newValue - this.fileList = this.urls.map(it => { return { response: { data: { url: it }}} }) - } else { - if (newValue && this.urls.length === 0) { - this.urls.push(newValue) + modelValue() { + if(this.emitUpdate){ + this.emitUpdate = false + if(this.fileList.length == 0){ + this.renderFile() } + }else{ + this.renderFile() } } }, @@ -176,25 +176,37 @@ export default { }) this.action = this.action + `?externalId=${this.externalId}&externalType=${this.externalType}` } else { - if (this.modelValue instanceof Array) { - this.urls = this.modelValue - this.fileList = this.urls.map(it => { return { response: { data: { url: it }}} }) - } else { - if (this.modelValue) { - this.urls.push(this.modelValue) - } - } - } - // 解决多图片上传时，第一次上传的多个的时候 只能有一个成功的bug - if (this.modelValue instanceof Array && this.modelValue.length > 0) { - this.uploadDynamicProps.fileList = this.fileList - } else { - if (this.modelValue) { - this.uploadDynamicProps.fileList = this.fileList - } + this.renderFile() } }, methods: { + setFileList(){ + if(this.urls.length > 0){ + this.fileList = this.urls.map(it => { + return { + response: { + data: { + url: it + } + } + } + }) + } + }, + renderFile(){ + if(this.multiple && this.join && this.modelValue){ + this.urls = this.modelValue.split(',') + }else{ + if (this.modelValue instanceof Array) { + this.urls = this.modelValue + this.fileList = this.urls.map(it => { return { response: { data: { url: it }}} }) + } else { + if (this.modelValue) { + this.urls.push(this.modelValue) + } + } + } + }, handleRemove(url) { this.urls.splice(this.urls.indexOf(url), 1) this.fileList.forEach((it, i) => { @@ -206,13 +218,16 @@ export default { if (this.multiple) { if(this.join){ this.$emit('update:modelValue', this.urls.join(',')) + this.emitUpdate = true this.$emit('change', this.urls.join(',')) }else{ this.$emit('update:modelValue', this.urls) + this.emitUpdate = true this.$emit('change', this.urls) } } else { this.$emit('update:modelValue', '') + this.emitUpdate = true this.$emit('change', '') } }, @@ -232,13 +247,16 @@ export default { if (this.multiple) { if(this.join){ this.$emit('update:modelValue', this.urls.join(',')) + this.emitUpdate = true this.$emit('change', this.urls.join(',')) }else{ this.$emit('update:modelValue', this.urls) + this.emitUpdate = true this.$emit('change', this.urls) } } else { this.$emit('update:modelValue', res.data.url) + this.emitUpdate = true this.$emit('change', res.data.url) } this.onDragEnd()