青年女工 2022-04-30 12:38 采纳率: 76.5%
浏览 31
已结题

图片转换成base64

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

  • 写回答

2条回答 默认 最新

  • Heerey525 前端领域新星创作者 2022-04-30 13:32
    关注
    
<!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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 5月27日
  • 已采纳回答 5月19日
  • 创建了问题 4月30日

悬赏问题

  • ¥15 神经网络预测均方误差很小 但是图像上看着差别太大
  • ¥15 Oracle中如何从clob类型截取特定字符串后面的字符
  • ¥15 想通过pywinauto自动电机应用程序按钮，但是找不到应用程序按钮信息
  • ¥15 如何在炒股软件中，爬到我想看的日k线
  • ¥15 seatunnel 怎么配置Elasticsearch
  • ¥15 PSCAD安装问题 ERROR: Visual Studio 2013, 2015, 2017 or 2019 is not found in the system.
  • ¥15 (标签-MATLAB|关键词-多址)
  • ¥15 关于#MATLAB#的问题，如何解决？（相关搜索：信噪比，系统容量）
  • ¥500 52810做蓝牙接受端
  • ¥15 基于PLC的三轴机械手程序