Javascript 在客户端转义编码的base 64字符串，以便它可以在服务器端正常工作和读取

先读我以前的帖子，先读我贴的答案，以便更好地了解我目前的情况

是否有人知道有任何JavaScript方法可以转义JSON对象中编码的base 64字符串的敏感字符，以便在服务器端正确读取

最近，我无法在服务器端正确读取JSON对象中编码的base 64字符串。所以我使用了一个JavaScript方法调用encodeURIComponent，用于转义URL的特殊字符

绳子。因此，我在客户端JSON对象中的编码Base64字符串上使用了它，它的工作方式令人惊讶，但这个解析方法有一些限制，因为encodeURIComponent用于URL字符串，它不能在真正长的编码Base64字符串上工作。我在一个大视频的编码base64字符串上测试了这个，它给了我这个错误

未捕获范围错误：字符串长度无效

我知道这个方法是用于URL的，但它使它工作了，我意识到我必须找到另一种方法从客户端的JSON对象中转义编码的base 64字符串，以便能够在服务器端正常工作。所以你们中的任何人都知道可以从客户端转义编码的base 64字符串的任何其他JavaScript方法吗是否在服务器端正确读取

这是我的密码

index.php

x、 php

还有一件事

请不要评论那些批评将一个以base64字符串编码的大文件发送到服务器有多糟糕的声明，因为如果你这样做，我将忽略你的评论，我知道其他更简单的方法，如HTML

---

form tag方法和JavaScript的FormData方法，因此请不要建议那些与base 64无关的方法或其他方法，因为出于个人原因，我想知道如何在base 64中实现这一点，而不管与我刚才所说的其他方法相比，此方法有多差。

你不能这样做吗：

xhr.setRequestHeaderContent-type，application/json

并将JSON作为JSON发送，而不是URL编码

编辑以为接收方添加更多信息

根据这里的帖子：

您可以使用以下选项：

$entityBody=文件\u获取\u内容'php://input';

……或者：

$entityBody=stream\u get\u contentsSTDIN

---

阅读全部发布的内容，而不必担心必须对引用内容的变量名进行编码。

对编码的base 64字符串的敏感字符进行转义，因此，您的意思是转义+、/和=？我相信这可能是服务器端无法正确读取的原因。我看不到a-Z，a-z或0-9是一个问题，因此，在您最喜欢的搜索引擎中查找Url64我可以测试我可以使用什么方法来逃避您知道的可疑字符，好的，我将在谷歌上搜索。仅仅担心用于base64编码的非[a-Za-z0-9]字符是不够的，还会有大括号、逗号、，冒号，可能还有JSON使用的反斜杠，它们也必须进行编码；建议它在服务器端给了我一些错误，例如未定义的索引：upload_info_json_对象和照片以及$first_name和$last_name变量不能再被读取，所以我知道现在我必须坚持使用xhr.setRequestHeaderContent-type，application/x-www-form-urlencoded；我想试试你关于$entityBody=stream\u get\u contentsSTDIN的其他建议；建议给我一点时间。让你知道如果你正在尝试$entityBody=stream。。。第二部分，这与我建议的第一部分是一致的。如果你独自尝试，但坚持用你最初的方式编码信息，那是行不通的。顺便说一句，我从来没有想过第一部分要用你编写接收端的方式。我添加了第二部分，因为我意识到您可能不知道如何获取实体体，并且不使用类似于$\u POST['upload\u info\u json\u object']的东西。所以不要使用$\u POST['upload\u info\u json\u object']，这就是您建议的地方吗？如果不是，我将如何获得其他JSON对象值示例first name last name

<style>

#photo-input{
display: block;
margin-bottom: 50px;
}

</style>

<script>

document.addEventListener('DOMContentLoaded',function(){

document.querySelector('#submit').addEventListener('click',function(){

var photo_input= document.querySelector('#photo-input').files[0];

//Convert #photo-input content into a base 64 string
var reader = new FileReader();
reader.readAsDataURL(photo_input);

reader.onload = function (){
var photo_input_result= reader.result;
sendUploadInfo(photo_input_result);
}
//

});

function sendUploadInfo(photo_input_result){

//Remove the data:image/file_extension;base64, prefix by not removing this you wont be able to view this as a file in any computing application
var remove_the_photo_file_reader_prefix= photo_input_result.split(',')[1];
//

//Escape incompatible characters that won't work properly in JSON and PHP
var escape_incompatible_characters_from_the_photo= encodeURIComponent(remove_the_photo_file_reader_prefix);
//

var photo= escape_incompatible_characters_from_the_photo;

//<JSON data>

var upload_info = {
    first_name: "John",
    last_name: "Smith",
    photo: photo
};

//</JSON data>

var upload_info_json_object= 'upload_info_json_object='+JSON.stringify(upload_info); 

//<AJAX>
var xhr= new XMLHttpRequest();
xhr.onreadystatechange= function(){

if(xhr.readyState == 4){

document.querySelector('#output').innerHTML= xhr.responseText;

}
}

xhr.open('POST','x');
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(upload_info_json_object);
//</AJAX>
}

});

</script>

<input type='file' id='photo-input'>

<button id='submit'>Send JSON data</button>

<div id='output'></div>

<?php

$upload_info_json_object = json_decode($_POST['upload_info_json_object']);

$first_name= $upload_info_json_object->first_name;
$last_name= $upload_info_json_object->last_name;


//Photo upload section
$photo= $upload_info_json_object->photo;

//Decode into a file
$photo= base64_decode($photo); 

file_put_contents('geeksforgeeks-22.jpg',$photo);

//

?>

<h1><?php echo $first_name.' '.$last_name.' just uploaded a photo.'; ?></h1>