在element ui中el-upload组件上传文件提交后,就无法再继续操作了,百度找的方法都是this.$refs.upload.clearFiles();然后也不好用,我上传的是多个文件fileList,用了this.$refs.upload.clearFiles()要么报错,要么还是上传后再点击没有任何反应,有什么方法嘛,感谢帮忙,万分感谢
建议贴代码
一、上传完毕后,隐藏上传框
//js
<el-upload
:class="this.fileList.length >=9 ?'hide':'display'">
</el-upload>
//css
<style>
.hide /deep/ .el-upload--picture-card{
display:none
}
.display /deep/ .el-upload--picture-card{
width:68px;
height: 68px;
}
</style>
二、el-upload图片的放大功能
<el-upload
:on-preview = "handlePreview"></el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="ruleForm.imageUrl" alt="">
</el-dialog>
data(){
return{
dialogVisible: false,
}}
onPreview (file) {
this.ruleForm.imageUrl = file.url
this.dialogVisible = true
},
三、el-upload图片的删除功能
handleRemove(file,fileList){
//file是点击删除的图片 将非file.uid的项筛选出来留下即可
this.fileList = fileList.filter(item => {return item.uid !== file.uid})
// 取出fileList中的imageUrl 用,拼接传给后端
this.ruleForm.imageUrl = this.fileList.map(function(item){
return item.response.data.imageUrl;
}).join(",");
console.log(this.ruleForm.imageUrl,'this.ruleForm.imageUrl==========')
},
四、el-upload图片的上传功能
handlePhotoSuccess (res, file, fileList) {
//code为0 上传 imageurl拼接
if (res.code === '0') {
this.ruleForm.imageUrl = this.fileList.map(function(item){
return item.response.data.imageUrl;
}).join(",");
} else {
//code不为0 错误提示
this.$message.error(res.msg)
}
},