element el-upload 踩坑记录

element+vue 实现上传图片功能

<el-upload
			class="avatar-uploader"
			:action="$nodeUrl + '/uploadFile'"
			:show-file-list="false"
			:on-change="changeFrontCover"
			:on-success="uploadOver"
			accept="image/jpg,image/jpeg,image/png"
>
	<img v-show="form.image" id="img" :src="form.image" class="avatar" />
	<i v-show="!form.image" class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

// 文件上传结束
uploadOver(response) {
	if (response.mtycode == 200) {
		this.form.image = response.data;
	} else {
		this.$message.warn('图片上传失败,请重新上传');
	}
},

// 文件上传结束
uploadOver(response) {
	if (response.mtycode == 200) {
		this.$nextTick(()=>{
			this.form.image = response.data;
		})
	} else {
		this.$message.warn('图片上传失败,请重新上传');
	}
},

上传图片后拿到文件地址，对image进行赋值，dom进行挂载更新，控制台报错404，使用该文件地址粘贴进项目中作为常量使用，一切正常，使用$nextTick,$foreforceUpdate() 并未解决问题

解决思路: 个人判断应该是异步问题

1. 可能是文件服务器minio存储文件后将文件地址返回，实际文件并为完成存储(仅作为假想,并未证实)
2. 添加延时器解决问题,测试得出最小延时为30ms

uploadOver(response) {
	if (response.mtycode == 200) {
		settimeout(()=>{
			this.form.image = response.data;
		},30)
	} else {
		this.$message.warn('图片上传失败,请重新上传');
	}
},