引言
在进行vue后台管理系统开发的时候又遇到了这个问题，由于上次没有写文章记录，所以还是查看了之前写的项目才解决这个问题。
遇到的问题
我将上传的表单单独作为一个组件(假设为A页面)，然后在另外一个页面（假设为B页面）中使用Dialog来显示这个表单。在进行修改操作的时候，A中的数据肯定是需要从B中通过props来进行传输的，然后在A中有一个图片上传的组件，那么这个图片数据肯定也是从B中传过来的。在element提供的el-upload组件中有一个参数:file-list，通过绑定这个参数可以设置其默认显示图片。
问题就出现在这里，如果我将:file-list绑定的参数通过props来进行传递（B传给A），虽然可以做到每次只显示出来我这一张图片，但是每次在打开Dialog的时候，界面会显示出上一次我打开的Dialog的图片，虽然是呈现出一个慢慢消失的效果，而且不影响效果，但是看起来不太美观。
解决方式
我这里限制了上传数量为1
具体操作大概就是如下：
- 通过
watch监听器去监听prop中传进来的illegalInfoImg参数（这个参数就是存储了图片的地址）- 然后在
watch监听器中去进行相关操作（需要判断是否符合条件，然后将illegalInfoImg参数加入到illegalInfoImgFileList中）- 重置表单的时候需要将illegalInfoImg和illegalInfoImgFileList置空
- el-upload组件中需要绑定一个
on-remove参数，在这里面写入清空illegalInfoImg即可
通过百度，我这里采用了监听器来完成操作，具体代码如下
这是我的el-upload组件
<el-form-item label="违法图片" prop="illegalInfoImg">
<el-upload :file-list="illegalInfoImgFileList"
ref="upload"
action=""
:headers="illegalInfoImgUploadHeaders"
:data="illegalInfoImgUploadData"
:http-request="uploadIllegalInfoImg"
:before-upload="beforeUpload"
:on-remove="handleRemove"
accept=".jpg,.jpeg,.png,.JPG,.JPEG"
list-type="picture-card"
show-file-list
:limit="1"> <template
#default><i class="el-icon-plus"></i></template></el-upload>
</el-form-item>
这是其相关方法
export default {
name: 'UpdateIllegalInfoDialog',
components: {
},
props: {
formDataProps: {
illegalInfoId: null,
illegalInfoImg: null,
illegalInfoPlace: "",
illegalActId: "",
happenTime: null,
identityCard: "",
carNumber: "",
updateBy: null
}
},
data() {
return {
formData: this.formDataProps,
rules: {
illegalInfoPlace: [{
required: true,
message: '字段值不可为空',
}],
illegalActId: [{
required: true,
message: '字段值不可为空',
}],
},
illegalActIdOptions: [{
"label": "select 1",
"value": 1
}, {
"label": "select 2",
"value": 2
}, {
"label": "select 3",
"value": 3
}],
illegalInfoImgFileList: [],
illegalInfoImgUploadHeaders: {
},
illegalInfoImgUploadData: {
},
}
},
computed: {
getIllegalInfoImgFileListLength(){
return this.illegalInfoImgFileList.length
}
},
watch: {
'formData.illegalInfoImg':{
handler(newVal,oldVal){
// this.albumCoverFileList = [];
console.log(newVal,oldVal)
if (oldVal == "" || oldVal == null && this.getIllegalInfoImgFileListLength==0){
console.log(this.getIllegalInfoImgFileListLength)
this.illegalInfoImgFileList = [{
name: 'default',
url: newVal
}]
}
},
immediate: true
}
},
created() {
this.getIllegalActOptions()
},
mounted() {
},
methods: {
async submitForm() {
let flag = false
//表单验证，默认通过
let formValidation = true
this.$refs['vForm'].validate(valid => {
if (!valid){
formValidation = false
}
//TODO: 提交表单
})
if (formValidation === true){
//这里需要使用await，否则不会等待该方法运行完成
await updateIllegalInfo(this.formData).then(res=>{
this.$message.success("修改成功")
flag = true
})
}
return flag
},
resetForm() {
this.$refs['vForm'].resetFields()
this.illegalInfoImgFileList = []
this.formData.illegalInfoImg=''
},
getIllegalActOptions(){
getIllegalActOptions().then(res =>{
this.illegalActIdOptions = res.data
})
},
uploadIllegalInfoImg(param){
console.log('进入了自定义上传')
// console.log(param.file)
let formData = new FormData();
formData.append('file',param.file)
formData.append('userId',this.$store.getters.userInfo.userId)
uploadIllegalInfoImg(formData).then(res =>{
this.formData.illegalInfoImg = res.data
this.$message.success("上传成功")
})
},
beforeUpload(file) {
const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);
const whiteList = ["jpg", "jpeg", "png","JPG","JPEG"];
if (whiteList.indexOf(fileSuffix) === -1) {
this.$message.error('上传文件类型不匹配！');
return false;
}
const isLt2M = file.size / 1024 / 1024 < 3;
if (!isLt2M) {
this.$message.error('上传文件大小不能超过 3MB');
return false;
}
},
handleRemove(file, fileList){
// this.albumCoverFileList = fileList
this.formData.illegalInfoImg = ''
// console.log(file, fileList);
// console.log(this.illegalInfoImgFileList);
// console.log(fileList.length)
// console.log(this.illegalInfoImgFileList.length)
}
}
}
其中主要相关的是computed、watch中的两个方法，还有resetForm（）方法中的清空执行顺序不能变，以及handleRemove（）方法中的操作
总结
在解决问题后要及时记录，才能让自己在以后遇到同样问题的时候更快解决