html
action:请求url,从后端那里获取
on-success:文件上传成功时的钩子,获取文件上传成功后返回的图片url
headers:请求头,可以配置权限
<el-upload
class="uploader"
:action=ossUrl
:on-success="handleImgSuccess"
:headers="{
Authorization:
token
}"
>
<img
v-if="eventInfo.imageUrl"
:src="eventInfo.imageUrl"
class="uploaderImg"
/>
<div
v-else
class="uploaderIcon"
>
<el-icon>
<Plus />
</el-icon>
点击上传图片
</div>
</el-upload>
JS
mounted() {
/**
* 上传图片:获取token,获取ossUrl
*/
const loginStore = useLoginStore();
this.token = loginStore.token
this.ossUrl = base.baseUrl + base.ossUrl
},
methods: {
/**
* 图片上传成功
*/
handleImgSuccess(response) {
console.log(response)
if (response.code === 200) {
// 获取图片url
this.eventInfo.imageUrl = response.data.url;
}
}
}
CSS
<style scoped>
.eventInfo .right .uploader {
box-sizing: border-box;
display: block;
width: 100%;
height: 100%;
}
/* 在最下面的style标签中 */
/* .eventInfo .right .uploader .el-upload {
background-color: pink;
width: 100%;
height: 100%;
display: block;
} */
.right .uploader .uploaderImg {
width: 100%;
height: 100%;
}
.right .uploader .uploaderIcon {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: 2px dotted red;
border-radius: 20px;
color: rgba(255, 0, 0, 0.76)
}
</style>
<style>
.eventInfo .right .uploader .el-upload {
width: 100%;
height: 100%;
display: block;
}
</style>
实现效果
本文转载自: https://blog.csdn.net/m0_63143512/article/details/138266928
版权归原作者 Jason 六只熊 所有, 如有侵权,请联系我们删除。
版权归原作者 Jason 六只熊 所有, 如有侵权,请联系我们删除。