el-upload读取上传图片转为Base64数据（记录）

最新推荐文章于 2024-07-15 15:43:44 发布

IranLin

最新推荐文章于 2024-07-15 15:43:44 发布

阅读量987

点赞数

文章标签： vue.js elementui

本文链接：https://blog.csdn.net/IranLin/article/details/120312451

版权

在前端开发中遇到将图片以MultipartFile形式传递给后台的问题，原本尝试直接使用对象传递multipartFile未果，改为Base64编码方式成功。文章详细描述了在处理文件上传时遇到的执行顺序问题，以及如何通过FileReader实现Base64转换，并指出在on-change事件处理和console.log之间的执行顺序可能导致的误解。

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

在页面开发是遇到点小问题，想用对象直接传递图片，后台用multipartFile接收，之前用formdata处理多文件上传没有问题，用对象接收multipartFile无法进行，暂时没有深究原因，选择改成Base64图片数据。

setCorporateEmblem(file:any){
    const This = this;
    const reader = new FileReader();
    reader.readAsDataURL(file.raw);
    reader.onload = function(e){
      // this.result // 这个就是base64编码了
      This.form.corporateIdCardEmblemFile = this.result;
    }
  }

给on-change写一个处理方法，this.result能够读取到转换好的Base64图片数据。

中间有个小插曲，我原本是在on-change方法中引用转换的方法，在on-change方法和reader.onload的方法里都将form.corporateIdCardEmblemFile进行了console输出，但是都是空的，我以为只能获取无法给form的参数设值，纠结了很久，在一次去掉图片再次上传后console输出了Base64，这次输出的值使上次图片的Base64数据。应该是reader.onload的执行顺序靠后吧，实际是数据已经注入了form里面，但是执行顺序在console之后，所以看不到输出值。

没有研究过前端做起来就是很难受啊-。-