el-upload 读取图片为Base64位数据

最新推荐文章于 2024-03-14 16:24:44 发布

柳牧之

最新推荐文章于 2024-03-14 16:24:44 发布

阅读量3.9k

点赞数 1

分类专栏： element 文章标签： el-upload

本文链接：https://blog.youkuaiyun.com/u012976879/article/details/107098654

版权

element 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用el-upload组件将图片转换为Base64位数据，适用于前端框架限制无法直接上传图片到服务器的情况。代码示例展示了如何检查图片格式和大小限制，以及如何通过FileReader API读取图片并转换为Base64格式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小编由于框架限制不能直接将图片上传到服务器，所有小编只能研究将图片转为base64位，虽然网上有很多的例子，但是最后还都是失败了，下面的代码是小编研究的结果，并且可以正常实现此功能，希望对后面的人有帮助。

前端HTML

 <el-upload
          class="avatar-uploader"
          ref="upload"
          action="#"
          :show-file-list="false"
          :before-upload="beforeUpload"
          :on-success="handleChange"
          :on-change="onChange"
          :auto-upload="false"
          :data="addList">

          <i class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>

JS代码

 beforeUpload(){
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    onChange(file,fileList){
      var _this = this;
      var event = event || window.event;
      var file = event.target.files[0];
      var reader = new FileReader();
      //转base64
      reader.onload = function(e) {
        _this.imageUrl = e.target.result //将图片路径赋值给src
        _this.guideImage =e.target.result //将图片路径赋值给src

      }
      reader.readAsDataURL(file);
    },
    handleChange(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },