图片上传转base64格式传给后台，以及上传图片的展示

最新推荐文章于 2024-11-22 11:07:33 发布

原创

最新推荐文章于 2024-11-22 11:07:33 发布 · 2w 阅读

收录于

本文介绍了一个项目中实现图片上传并转化为base64格式与后台交互的过程。点击上传按钮后，图片会预览在指定区域，通过`readAsDataURL`将图片转换为base64，然后设置到`img`标签的`src`属性以显示图片。

之前项目上有个需要上传图片的功能，第一次了解到了base64这个东西，（百科：base64是网络上最常见的用于传输8Bit字节码的编码方式之一，Base64就是一种基于64个可打印字符来表示二进制数据的方法）。做出来的效果如下：

点击上传，将图片展示在图片区域，并将图片转化为base64格式进行后台的数据交互，具体代码如下：

css：

解决input type=file的自带样式问题，以及文件上传前的图片区域样式问题

 
  < 
  style 
  scoped 
  > 
 
  .avatar-uploader .el-upload { 
 
  width: 
  100%; 
 
  border: 
  1px 
  dashed 
  #d9d9d9; 
 
  border-radius: 
  6px; 
 
  cursor: 
  pointer; 
 
  position: 
  relative; 
 
  overflow: 
  hidden; 
 
  float: 
  inherit; 
 
   } 
 
  .avatar-uploader .el-upload:hover { 
 
  border-color: 
  #409EFF; 
 
   } 
 
  .avatar-uploader-icon,img { 
 
  font-size: 
  28px; 
 
  color: 
  #8c939d; 
 
  width: 
  100%; 
 
  max-width: 
  500px; 
 
  min-width: