vue 图片上传base64

最新推荐文章于 2025-06-05 16:08:55 发布

原创最新推荐文章于 2025-06-05 16:08:55 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

38 篇文章

订阅专栏

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

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

未添加图片时样式图如下

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

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="big" icon="el-icon-zoom-in" @click="boostImg(firImg)"></el-button>
        <label for="company2">
        <span class="iconfont"><i class="el-icon-edit" ></i></span>
        </label>
    </span>
    
    <div v-else style="width:48%;display:inline-block;" >
        <input style="display:none;" id="company3" ref="file" type="file" class="form-control" @change="onFileChange" >
        <label for="company3">
            <div class="avatar-uploader">
            <img v-if="firImg"  :src="firImg" alt="" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" ></i>
            </div>
        </label>
    </div>
</el-form-item>

css

.el-upload-list--picture-card .el-upload-list__item{
    width: 60px;
    height: 60px;
}
.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: 14px;
  color: #8c939d;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border: 1px dashed #8c939d;
}
.avatar {
  width: 30px;
  display: block;
}
.limImg{
  display: inline-block;
  width: auto;
  height: 30px;
  vertical-align: middle;
}

以下为methods中关于上传图片的代码方法，firImg中存档则是应向后台传的base64

onFileChange(e) {
    let files = e.target.files || e.dataTransfer.files;
    if (!files.length) {
        return;
    }
    let isLt2M = files[0].size / 1024 / 1024 < 1;
    if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 1MB');
        return;
    }
    this.createImage(files[0]);
},
createImage(file) {
    let reader = new FileReader();
    reader.onload = e => {
        this.firImg = e.target.result
    };
    reader.readAsDataURL(file);
},

有图片时，单击查看按钮进行查看操作

boostImg(url){
    this.$alert('<img src="'+url+'"  alt="" style="width:100%;">', {
        dangerouslyUseHTMLString: true,
        center: true,
        showCancelButton:false,
        showConfirmButton:false
    }).catch(err =>{

    });
},