mirror of
https://gitee.com/ssssssss-team/magic-boot.git
synced 2025-02-22 02:32:49 +08:00
修复 上传文件/图片 无法动态渲染问题
This commit is contained in:
吕金泽
parent
d7d7dce744
commit
01e600707a
@ -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"
|
||||
>
|
||||
<el-button type="primary" icon="ElIconUploadFilled" :loading="uploadLoading" :disabled="!multiple && fileList.length == 1">{{ label }}</el-button>
|
||||
<div slot="tip" v-if="showTip" class="el-upload__tip">支持上传{{ getSettingSuffixs().replaceAll(',', '，') }}文件，且不超过{{ maxFileSize }}MB</div>
|
||||
@ -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)
|
||||
}
|
||||
}
|
||||
|
||||
@ -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"
|
||||
>
|
||||
<el-icon class="uploadIcon">
|
||||
<ElIconPlus />
|
||||
@ -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()
|
||||
|
||||
Loading…
Reference in New Issue
Block a user