图片转换成base64

怎么将图片上传转换成base64并通过ajax上传 求解答 谢谢


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input id="file" type="file" />
    <button onclick="submit()">上传</button>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
      function submit() {
        var file = $("#file")[0].files[0];
        console.log("file", file);
        var reader = new FileReader();
        var AllowImgFileSize = 2100000; //上传图片最大值(单位字节)（ 2 M = 2097152 B ）超过2M上传失败
        if (file) {
          //将文件以Data URL形式读入页面
          reader.readAsDataURL(file);
          reader.onload = function (e) {
            //var ImgFileSize = reader.result.substring(reader.result.indexOf(",") + 1).length;//截取base64码部分（可选可不选，需要与后台沟通）
            if (
              AllowImgFileSize != 0 &&
              AllowImgFileSize < reader.result.length
            ) {
              alert("上传失败，请上传不大于2M的图片！");
              return;
            } else {
              //执行上传操作
              console.log(reader.result);

              upload(reader.result);
            }
          };
        }
      }

      function upload(base64Url) {
        $.ajax({
          url: "你的上传地址",
          type: "POST",
          data: { "约定的参数名": base64Url },
          success(res) {
            console.log("上传成功", res);
          },
          error(err) {
            console.log("上传失败", err);
          },
        });
      }

      // 参考来源 https://blog.csdn.net/qq_37899792/article/details/102600293
    </script>
  </body>
</html>



let reader = new FileReader();
reader.readAsDataURL(需要转码的文件);

// 转码成功后会调用reader.onloaden
reader.onloaden = function () {
// reader.result是获取转码后的base64
    var base64 = reader.result;
    console.log(base64);
}