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);
        };
      });
    },
相关推荐
夜焱辰6 小时前
浏览器端 Agent 的文件版本管理:不用 Git,基于 OPFS + SQLite 自己造了一个
前端·人工智能
梦想的颜色6 小时前
TypeScript 完全指南(下):从类型体操到生产级配置
前端·javascript·typescript
Hi~晴天大圣8 小时前
npm使用介绍
前端·npm·node.js
888CC++8 小时前
如何在 C 语言中进行程序调试?
前端·javascript·算法
喵个咪9 小时前
基于 Taro 的 Headless CMS 多端前端架构:技术解析与二次开发导引
前端·react.js·taro
狂炫冰美式9 小时前
你还在古法PPT吗,试试HTML呢?免费编辑导出工具给 xdm 放这了
前端·后端·github
万少9 小时前
未来组织的分水岭不是员工数量,而是人才密度
前端·后端·面试
任磊abc9 小时前
nextjs16配置eslint+prettier
前端·eslint·nextjs·prettier
x***r15110 小时前
Another-Redis-Desktop-Manager.1.3.7安装步骤详解(附Redis可视化连接与Key管理教程)
前端·bootstrap·html
Captaincc10 小时前
你真的知道自己把 AI 用在了哪里吗?这是 Vibe Usage 想回答的问题
前端·vibecoding