青年女工 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日

悬赏问题

  • ¥20 来一个会抓包app支付接口的
  • ¥30 vivado2017.4的sdk打不开
  • ¥50 matlab,文献复现
  • ¥20 寻找Flink CDC指导,有偿咨询
  • ¥15 cruise如何仿真不同温度下车辆的经济性?
  • ¥20 扑克牌游戏的完整代码
  • ¥88 求帮安装Python架构的vnpy
  • ¥20 逻辑回归法分析品牌知名度和购买意向
  • ¥15 华为云主机-异常连接
  • ¥50 vue 成绩列表 输入成绩,并统计各分数段人数