element el-upload 踩坑记录

最新推荐文章于 2024-01-26 17:41:45 发布

CanTest

最新推荐文章于 2024-01-26 17:41:45 发布

阅读量407

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/CanTest/article/details/125991105

版权

本文探讨了在使用Element UI和Vue.js实现图片上传功能时遇到的404错误。问题出现在图片地址被立即赋值但文件实际未完全存储。通过设置30ms延迟解决了这个问题，确保文件存储完成后再更新图像源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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() 并未解决问题

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

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

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