上传图片的方法有很多,我们可以通过input上传的功能来上传文件、文件夹。同时,我们也可以通过使用ElementUI中的el-upload标签来上传图片、视频。当我们使用el-upload来上传时往往出现上传的图片并不能显示的问题,如下图:
此时,从图中可以看出图片已经上传,但是并不显示图片,又或者出现下图情况,刚上传图片时,可以显示,但是不久就出现下图情况,甚至图片又消失不见,真是令人头大!
那么,遇到这种问题的小可爱们,看过来啦!我们可以直接在before-upload事件中添加
this.imageUrl = URL.createObjectURL(file);
其中 imageUrl是图片的路径,这样就可以解决图显示的问题。直接上代码:
<template>
<div class="dashboard-container">
<div class="dashboard-text">name: Upload 上传</div>
<el-upload class="avatar-uploader" action="#" :show-file-list="false"
:before-upload="beforeAvatarUpload">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</div>
</template>
<script>
export default {
data() {
return {
imageUrl: ''
}
},
methods: {
beforeAvatarUpload(file) {
console.log(file)
// 使图片显示
this.imageUrl = URL.createObjectURL(file);
return false
}
}
}
</script>
<style>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style>
当然我们在对接后台接口时,action属性要设置为 # ,如上图。
此外我们上传时还会发现,该标签会走一遍本地的接口,如下图:
所以我们要在before-upload事件中添加 return false 去阻止!下面我们看解决以后的效果:
图片可以正常显示!