elementui图片上传转为base64字符串

场景:后端需要将上传的图片文件作为base64字符串的方式传参给他。

html代码

html 复制代码
      <div class="upload_box">
                  <el-upload
                    class="upload-demo"
                    ref="upload"
                    action="#"
                    :show-file-list="false"
                    :http-request="
                      (file) => {
                        return httpRequest(file, item);
                      }
                    "
                   
                    style="display: inline-block"
                  >
                    <img
                      v-if="item.darkBg"
                      :src="'data:image/jpg;base64,' + item.darkBg"
                      class="avatar"
                    />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </div>

js代码

javascript 复制代码
    httpRequest(data, item) {
      
      // 转base64

      this.getBase64(data.file).then((resBase64) => {
        item.darkBg = resBase64.split(",")[1];
      });
    },

    // 转base64编码
    getBase64(file) {
      this.dialogVisible = false;
      return new Promise((resolve, reject) => {
        let reader = new FileReader();
        let fileResult = "";
        reader.readAsDataURL(file); //开始转
        reader.onload = function () {
          fileResult = reader.result;
        };
        //转失败
        reader.onerror = function (error) {
          reject(error);
        };
        //转结束 resolve 出去
        reader.onloadend = function () {
          resolve(fileResult);
        };
      });
    },
相关推荐
可子是我的小猫8 分钟前
【JS】模块(一)
javascript
跟橙姐学代码16 分钟前
Python 类的正确打开方式:从新手到进阶的第一步
前端·python·ipython
Jagger_16 分钟前
SonarQube:提升代码质量的前后端解决方案
前端·后端·ai编程
Becauseofyou13720 分钟前
如果你刚入门Three.js,这几个开源项目值得你去学习
前端·three.js
菜市口的跳脚长颌20 分钟前
前端大文件上传全攻略(秒传、分片上传、断点续传、并发控制、进度展示)
前端
不一样的少年_22 分钟前
同事以为要重写,我8行代码让 Vue 2 公共组件跑进 Vue 3
前端·javascript·vue.js
草履虫建模27 分钟前
在 RuoYi 中接入 3D「园区驾驶舱」:Vue2 + Three.js + Nginx
运维·开发语言·javascript·spring boot·nginx·spring cloud·微服务
云枫晖29 分钟前
JS核心知识-数据转换
前端·javascript
xuyanzhuqing30 分钟前
代码共享方案-多仓库合并单仓库
前端
RaidenLiu32 分钟前
Riverpod 3:重建控制的实践与性能优化指南
前端·flutter