1、点编辑回显后,因为不给展示图片的fileList赋空的话,**再次点击编辑**图片会一直追加,因此为此查询之前先置空就会出现所描述的现象;
上图
代码如下
<el-form-item label="展示banner" prop="projectName">
<el-upload
action="#"
ref="upload"
list-type="picture-card"
:on-remove="handleRemove"
:http-request="uploadAvatar"
:on-change="maxUploadNum"
:class="{hide:hideUpload}"
:before-upload="beforeAvatarUpload"
:on-exceed="handleExceed"
:file-list="fileList"
:limit="5"
multiple
>
<i class="el-icon-plus"></i>
</el-upload>
<!--<img v-for="item in picList" :src="item" alt="" />-->
<div>注:最多上传五张</div>
</el-form-item>
data() {
return {
hideUpload: false,
picList: [],
fileList:[],
},
}
},
uploadAvatar(item) {
var vm = this
const formData = new FormData()
formData.append('file', item.file)
const uid = item.file.uid
vm.axios({
method: 'post',
url: '/uploadFile',
data:formData
}).then(function(res) {
vm.picList.push({ key: uid, value: res.data.data.url })
vm.emptyUpload()
}).catch(() => {
vm.$message.error('上传失败,请重新上传')
vm.emptyUpload()
})
},
/**
* 清空上传组件
*/
emptyUpload() {
const mainImg = this.$refs.upload
if (mainImg) {
if (mainImg.length) {
mainImg.forEach(item => {
item.clearFiles()
})
} else {
this.$refs.upload.clearFiles()
}
}
},
handleRemove(file, fileList) {
for (const i in this.picList) {
if (this.picList[i].key === file.uid) {
this.picList.splice(i, 1)
}
}
if (this.fileList.length >= 5) {
this.hideUpload = true
} else {
this.hideUpload = false
}
},
//上传最大的图片个数
maxUploadNum(file, fileList) {
console.log(1,fileList.length)
if(fileList.length>=5){
this.hideUpload = true
}else {
this.hideUpload = false
}
},
handleExceed() {
this.$message.warning(`最多上传5个图片`);
},
// 上传图片之前的操作
beforeAvatarUpload(file) {
var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
const extension =
testmsg === 'jpg' ||
testmsg === 'JPG' ||
testmsg === 'png' ||
testmsg === 'PNG'
if (!extension) {
this.$message({
message: '上传图片只能是jpg / png格式!',
type: 'error'
})
return false // 必须加上return false; 才能阻止
}
const isLt1M = file.size / 1024 / 1024 < 1
if (!isLt1M) {
this.$message.error('上传头像图片大小不能超过 1MB!')
return false
}
return extension || isLt1M
},
editProject(projectId) {
this.activeName = '1'
this.projectInfo.projectId = projectId
this.getProjectByProjectId(projectId)
this.editdialogVisible = true
// this.resetTemp()
},
// 获取项目信息
getProjectByProjectId(projectId) {
var vm = this
vm.picList=[]
vm.fileList=[]
vm.emptyUpload()
this.axios({
method: 'GET',
url: '/project/getProject?projectId=' + projectId
}
).then(function(res) {
console.log(res.data.data)
res.data.data.userList=[]
vm.projectInfo = res.data.data
var title = []
var projectTitleString = vm.projectInfo.projectTitle
var bannerImageString = vm.projectInfo.bannerImage
if(projectTitleString !== null){
projectTitleString.split(',').forEach(function(item) {
title.push({ value: item })
})
vm.projectInfo.projectTitle = title
}else {
title.push({ value: "" })
vm.projectInfo.projectTitle = title
}
vm.projectInfo.entryMode += ''
if (bannerImageString !== null) {
bannerImageString.split(',').forEach(function(item) {
fileList.push({ name: 'name', url: item })
})
}
if (vm.fileList.length >= 5) {
vm.hideUpload = true
} else {
vm.hideUpload = false
}
})
},
这句没报错么
fileList.push({ name: 'name', url: item })