vue 图片上传base64

最新推荐文章于 2024-07-29 14:17:59 发布

好菜的程序媛

最新推荐文章于 2024-07-29 14:17:59 发布

阅读量1.1k

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/gomeer/article/details/89456865

版权

本文介绍了在Vue.js应用中如何处理图片上传，并将图片以Base64编码显示。当图片存在时，页面会显示编辑和查看按钮，通过HTML和CSS实现不同状态的展示。在methods中，提供了上传图片并存储Base64到firImg的数据绑定，以及查看按钮触发的查看操作。

摘要由CSDN通过智能技术生成

未添加图片时样式图如下

添加图片后，多了编辑和查看的按钮

html代码中分两个部分：无图片（如图1）/原本存在图片（图2）。根据绑定的firImg判断是否有图片

<el-form-item  label="产品图标：">
    <span v-if="firImg" class="spanImg">
        <img v-if="firImg"  :src="firImg" alt="" class="avatar limImg">
        <input style="display:none;" id="company2" type="file" class="form-control" @change="onFileChange">
        <el-button type="success" style="padding: 2px" size=

最低0.47元/天解锁文章

好菜的程序媛

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 图片上传base64

未添加图片时样式图如下添加图片后，多了编辑和查看的按钮html代码中分两个部分：无图片（如图1）/原本存在图片（图2）。根据绑定的firImg判断是否有图片<el-form-item label="产品图标："> <span v-if="firImg" class="spanImg"> <img v-if="firImg...
复制链接

扫一扫

专栏目录