elementUI里面upload组件上传图片时选择图片之后不显示图片的问题，

在upload组件里面上传图片之后不显示

<el-uploadclass="avatar-uploader"action="https://jsonplaceholder.typicode.com/posts/":show-file-list="false":on-success="handleAvatarSuccess":before-upload="beforeAvatarUpload"><img v-if="imageUrl" :src="data:imageUrl" class="avatar"><i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<style></style>
<script>export default {data() {return {imageUrl: ''};},methods: {handleAvatarSuccess(res, file) {this.imageUrl = URL.createObjectURL(file.raw);},beforeAvatarUpload(file) {const isJPG = file.type === 'image/jpeg';const isLt2M = file.size / 1024 / 1024 < 2;if (!isJPG) {this.$message.error('上传头像图片只能是 JPG 格式!');}if (!isLt2M) {this.$message.error('上传头像图片大小不能超过 2MB!');}return isJPG && isLt2M;}}}
</script>

这个问题的原因是因为 upload组件的有一个自动上的属性auto-upload默认值是true,也就是说当用户选择图片之后就会立即上传。这时如果上传地址接口有问题的话就会到时上传不成功没有办法触发handleAvatarSuccess这个钩子函数。导致没有渲染出图片。

解决

在项目中一般都是用户点击按钮之后才会进行往后台数据库插入的操作
所以我们一般会把 auto-upload属性设置成false，通过组件的submit()方法来提交文件
为了解决这个问题我们就需要在其他的钩子函数里来触发给渲染图片的区域赋值图片的地址、
我们可以在 on-change这个钩子函数里面来做这个事情 this.imageUrl=URL.createObjectURL(file.raw);

 <el-uploadclass="avatar-uploader"action="https://jsonplaceholder.typicode.com/posts/":show-file-list="false":on-change="handleAvatarChange" //文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用:before-upload="beforeAvatarUpload"><img v-if="imageUrl" :src="data:imageUrl" class="avatar"><i v-else class="el-icon-plus avatar-uploader-icon"></i></el-upload>handleAvatarChange(file,filelist){this.imageUrl=URL.createObjectURL(file.raw);}

然后我们在每次打开弹窗时、清除掉图片的地址就好了 this.imageUrl=“”

可能有更好的解决方法希望大家多多交流

elementUI里面upload组件上传图片时选择图片之后不显示图片的问题，相关推荐

ant design 预览图片_AntD框架的upload组件上传图片时遇到的一些坑
前言本次做后台管理系统,采用的是 AntD 框架.涉及到图片的上传,用的是AntD的 upload 组件. 前端做文件上传这个功能,是很有技术难度的.既然框架给我们提供好了,那就直接用呗.结果用的时 ...
vue实战(1)——解决element-ui中upload组件使用多个时无法绑定对应的元素
解决element-ui中upload组件使用多个时无法绑定对应的元素以前写的项目关于图片上传的都是单张或几张图片上传(主要是基于vue的element),图片路径都是固定写的,所以遇见过列表中多个 ...
使用element-ui的upload组件上传代码包时遇到的问题及总结
1.在工作中使用element-ui的upload组件时,遇到一个问题就是这个upload会自动发送一个http请求,即使你使用了http-request自定义上传覆盖默认上传函数,也会导致在控制台里 ...
vue问题三：element ui的upload组件上传图片成功和移除事件
element ui的upload组件上传图片成功和移除事件: 登录后获取到后台传的token存到中: sessionStorage.setItem("token",data.ob ...
基于 springboot + vue 的 element-ui 的 upload 组件头像上传功能
基于 springboot + vue 的 element-ui 的 upload 组件头像上传为了方便我们自己本地测试使用,我们将文件上传至自己电脑的磁盘中,由于项目是前后端分离的,所以我们会直接 ...
阿里云OSS 服务端签名后直传之分片上传（结合element-ui的upload组件）
分片上传(结合element-ui的upload组件实现自定义上传) async uploadFree(content){let data = await this.getOssToken(); // ...
element-ui upload组件上传图片时限制图片宽高
template部分代码,引入upload组件,这里采用自动上传文件 <div class="filesC"> <el-upload ref="file ...
elementui的upload组件怎么获取上传的文本流、_抖音feed流直播间引流你还不会玩？实操讲解...
本文由艾奇在线明星优化师写作计划出品在这个全民惊恐多灾多难且带有魔幻的2020,一场突如其来的疫情改变了人们很多消费习惯,同时加速了直播电商的发展,现在直播已经成为商家必争的营销之地,直播虽然很火, ...
前后端开发bug:python+vue开发图片验证码接口时，刷新浏览器不显示图片验证码，点击以后才可以显示和切换
现象: 刷新浏览器页面,图片验证码不显示,点击图片验证码区域以后,才能显示也可以切换显示下一个. 排查思路: 调用开发者工具,检查是否向后端发起获取图片验证码请求. 如果生成了图片uuid编号,发送了 ...
PyQt使用中遇到的若干问题（1）（版本选择，安装，显示图片，滑动条，窗口一闪而过）
最近几天在需要做个人脸检索的demo,开始在考虑使用C或者Python,但是由于我之前的实验使用的是基于Python的Keras框架,所以选择使用Python来做GUI,Python的GUI工具很多, ...

elementUI里面upload组件上传图片时选择图片之后不显示图片的问题，

在upload组件里面上传图片之后不显示

elementUI里面upload组件上传图片时选择图片之后不显示图片的问题，相关推荐

最新文章

热门文章

elementUI里面upload组件上传图片时选择图片之后不显示图片的问题，

在upload组件里面上传图片之后 不显示

elementUI里面upload组件上传图片时选择图片之后不显示图片的问题，相关推荐

最新文章

热门文章

在upload组件里面上传图片之后不显示