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);
        };
      });
    },
相关推荐
I_have_a_lemon几秒前
前端、产品、设计师神器推荐——Onlook
前端·cursor
前端小巷子1 分钟前
深入解析CSRF攻击
前端·安全·面试
JustHappy2 分钟前
SPA?MPA?有啥关系?有啥区别?聊一聊页面形态 or 路由模式
前端·javascript·架构
每天开心2 分钟前
🧙‍♂️闭包应用场景之--防抖和节流
前端·javascript·面试
hxmmm7 分钟前
webpack多入口打包文件
前端
CAD老兵9 分钟前
前端组件库的多主题实现原理与实战指南
前端
归于尽11 分钟前
Generator?从 yield 卡壳,到终于搞懂协程那点事
前端·javascript
FogLetter11 分钟前
React组件开发进阶:本地存储与自定义Hooks的艺术
前端·javascript·react.js
支撑前端荣耀15 分钟前
五、测试用例的组织和编写
前端
支撑前端荣耀15 分钟前
七、命令行运行Cypress
前端