青年女工 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 网络科学导论，网络控制
  • ¥100 安卓tv程序连接SQLSERVER2008问题
  • ¥15 利用Sentinel-2和Landsat8做一个水库的长时序NDVI的对比，为什么Snetinel-2计算的结果最小值特别小，而Lansat8就很平均
  • ¥15 metadata提取的PDF元数据，如何转换为一个Excel
  • ¥15 关于arduino编程toCharArray()函数的使用
  • ¥100 vc++混合CEF采用CLR方式编译报错
  • ¥15 coze 的插件输入飞书多维表格 app_token 后一直显示错误，如何解决？
  • ¥15 vite+vue3+plyr播放本地public文件夹下视频无法加载
  • ¥15 c#逐行读取txt文本，但是每一行里面数据之间空格数量不同