Question

我的任务是将已上传的图像转换为encode64，然后将其发送到API，我已经成功完成了所有部分的工作，但是我必须从encode64数据中删除标头。 data:image/png;base64,

<!DOCTYPE html>
<html>
<head>
<metea charset="utf8">
<title></title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
<script type="text/javascript">
    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#falseinput').attr('src', e.target.result);
                $('#base').val(e.target.result);
            };
            reader.readAsDataURL(input.files[0]);
        }
    }
</script>
</head>
<body>
<h1>File Upload</h1>
<input id="fileinput" type="file" accept="image/gif, image/jpeg, image/png" onchange="readURL(this);" /> <br><br>
<textarea id="base"></textarea>
</body>
</html>

Answer 1

您可以使用正则表达式获取“ base64”之后的所有文本，然后将其用作数据：

/base64,(.+)/.exec(e.target.result)[1]

请参见以下示例：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf8">
    <title></title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
    <script type="text/javascript">
      function readURL(input) {
        if (input.files && input.files[0]) {
          var reader = new FileReader();
          reader.onload = function(e) {
            $('#falseinput').attr('src', e.target.result);
            $('#base').val(/base64,(.+)/.exec(e.target.result)[1]);
          };
          reader.readAsDataURL(input.files[0]);
        }
      }
    </script>
</head>

<body>
  <h1>File Upload</h1>
  <input id="fileinput" type="file" accept="image/gif, image/jpeg, image/png" onchange="readURL(this);" /> <br><br>
  <textarea id="base"></textarea>
</body>

</html>

Answer 2

您可以使用替换功能并将其删除

function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#falseinput').attr('src', e.target.result);

                var base64Image = e.target.result;
                base64Image = base64Image.replace('data:image/png;base64,', '')
                                            .replace('data:image/jpeg;base64,', '')
                                            .replace('data:image/gif;base64,', '');

                $('#base').val(base64Image);
            };
            reader.readAsDataURL(input.files[0]);
        }
    }

Answer 3

请先将其放入脚本中，然后再存储在textarea中 var data=e.target.result; $('#base').val(data.replace("data:image/jpeg;base64,", ""));

完整脚本是

 function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#falseinput').attr('src', e.target.result);
                var data=e.target.result;
                $('#base').val(data.replace("data:image/jpeg;base64,", ""));
            };
            reader.readAsDataURL(input.files[0]);
        }
    }

在将图像获取为encode64的同时删除encode64标头数据。

3 个答案: